Visible Demo

Developer
HeeJae Kim
Size
3,219 Kb
Views
52,624
  1. Visible Demo Previews
  2. Visible Demo HTML Codes
  3. Visible Demo CSS Codes
  4. Visible Demo JS Codes

How do I make an visible demo?

What is a visible demo? How do you make a visible demo? This script and codes were developed by HeeJae Kim on 11 October 2022, Tuesday.

Visible Demo Previews
IQ Test

Visible Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Visible Demo</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap">
<div class="scroller"> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div> <div class="card item"></div>
</div>
<div class="control">
<div id="effeciveViewportIndicator"></div>
<label for="expandSize">expandSize : <span id="expandSize_value">0</span></label>
<input id="expandSizeInput" type="range" name="expandSize" min="-260" max="60" step="1" value="0"></input><br>
<label for="effeciveViewportIndicator">Show Effective Viewport Area</label>
<input id="effeciveViewportToggle" type="checkbox" name="effeciveViewportIndicator"> <div id="log"></div>
</div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/egjs/1.2.0/pkgd/eg.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Visible Demo - Script Codes CSS Codes

.wrap { position: relative;
}
.control{ float: left; position: relaative; margin-top: 100px;
}
#effeciveViewportIndicator { display: none; position: absolute; top: 0; left: 0; pointer-events: none; background: red; opacity: .3; z-index: 100;
}
.scroller { position: relative; float: left; height: 500px; width: 380px; background: #eee; margin: 60px 30px; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 10;
}
.item { display: block; background-color: #ccc; width: 300px; height: 60px; border-radius: 5px; margin: 30px auto; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
/* The fast way */
.card { box-shadow: 0 1px 2px rgba(0,0,0,0.15); position: relative; border-radius: 5px; -webkit-transform: translateY(0); -webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1); 1z-index:100;
}
.card:after { content: ""; border-radius: 5px; position: absolute; background-color: #fff; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 8px 17px 0 rgba(0,0,0,0.15),0 6px 20px 0 rgba(0,0,0,0.16); 1box-shadow: 0 5px 15px rgba(0,0,0,0.3); opacity: 0; -webkit-transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card.visible { 1margin: 30px auto; -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15);
}
/* Transition to showing the bigger shadow on hover */
.card.visible::after { opacity: 1;
}
input#expandSizeInput { width: 300px; height: 30px; vertical-align: middle; margin-top: -2px;
}
label { font-weight: 300; font-size: 16px; height: 30px; line-height: 30px; padding-right: 10px; display: inline-block; width: 120px; text-align: right;
}
#log { height: 288px; overflow-y: scroll; background-color: #eee; margin: 30px; padding-left: 10px;
}
#log .red {	color: red;
}

Visible Demo - Script Codes JS Codes

var visibleView = new eg.Visible('.scroller',{ targetClass : "card", expandSize : 0
}).on("change", function (e) { $(e.visible).addClass("visible"); $(e.invisible).removeClass("visible"); handler(e)
});
visibleView.check(0);
$('.scroller').scroll(function() { visibleView.check(0);
});
// UI for reconfigure options
$("#effeciveViewportToggle").on("change input", updateEffectiveViewport);
$("#expandSizeInput").on("change input", updateEffectiveViewport);
function updateEffectiveViewport(e) {	if(e.target && e.target.type === "range") { var expandSize = e.target.value;	$("#expandSize_value").html(expandSize);	visibleView.option("expandSize", expandSize); console.log(parseInt($('.scroller').height()), expandSize * 2);	visibleView.check(0);	} var expandSize = visibleView.option("expandSize"); $("#effeciveViewportIndicator").css({ width: parseInt($('.scroller').width()), height: parseInt($('.scroller').height()) + expandSize * 2, top: parseInt($('.scroller').css("margin-top")) -1 * expandSize, left: parseInt($('.scroller').css("margin-left")) });	if($("#effeciveViewportToggle")[0].checked) {	$("#effeciveViewportIndicator").show();	} else {	$("#effeciveViewportIndicator").hide();	}
}
var count = 0;
function handler(e) {	var log = $("#log");	if(handler.end) {	log.html("");	count = 1;	} ; var msg = $("<span>" +(count++) +": <span class=red>"+ e.eventType +"</span> event fired.<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ $(e.visible).length + " new visible, " + $(e.invisible).length + " new invisible<br>" + "</span>")	log.prepend(msg);	//handler.end = /^(flickEnd|restore)$/.test(e.eventType);
}
Visible Demo - Script Codes
Visible Demo - Script Codes
Home Page Home
Developer HeeJae Kim
Username happyhj
Uploaded October 11, 2022
Rating 3
Size 3,219 Kb
Views 52,624
Do you need developer help for Visible Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

HeeJae Kim (happyhj) Script Codes
Name
Safari skips system dialogs with the popstate event and the hashchange event
3 dimension plane
A Pen by HeeJae Kim
Resize image
Persist for jQuery .js
Touch events are not triggering after closing the system dialog
S2_cafe_viewmore_scroll
Vertical Zoom Slide
Eg.MovableCoord always stops at the edge that circular value is true.
Basic Cube
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!