"slider"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/arnideveloper/pen/ZexbbK?depth=everything&order=popularity&page=95&q=develop&show_forks=false" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oswald'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato'> <style class="cp-pen-styles">body,html{ width: 100%; height: 100%; } body { background: -webkit-linear-gradient(214deg, #333333, #333333); background: linear-gradient(236deg, #333333, #333333); padding: 0px; margin: 0px; overflow: hidden; font-family: 'Open Sans', sans-serif; font-weight: 100; font-size: 11px; } #Dots{ position: absolute; z-index: 5000; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */ /* IE 9 */ transform: translateX(-50%); /* IE 10, Fx 16+, Op 12.1+ */ position: absolute; } .Dot{ position: relative; opacity: 1; width: 100px; margin:1px; margin-bottom: 0px; cursor: pointer; /* border:1px solid rgba(255,255,255,0.05); */ background-color: rgba(255,255,255,0); font-size: 10px; color: rgba(255,255,255,0.5); display: inline-block; text-align: center; ppadding:0; } #nav{ position: relative; z-index:5000; text-align: center; /* top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); */ } #prevtBtn{ color: rgba(255,255,255,0.5); font-size: 40px; margin: 15px 15px 0px 15px; cursor: pointer; left: 100px; } #nextBtn{ color: rgba(255,255,255,0.5); font-size: 40px; margin: 15px 15px 0px 15px; cursor: pointer; right: 100px; } .box { width: 100%; height: 100%; text-align: center; font-size: 40px; color: white; right: 0; left: 0; position: absolute; } .slide p{ top: 0px; position: absolute; font-size: 50px; left: 10%; } .slide p:nth-child(2){ top: 120px; position: absolute; font-size: 10px; left: 10%; width: 20%; text-align: left; color: rgba(255,255,255,0.6); } .box:nth-child(1) { background-color: #444; background: url(https://s14.postimg.org/fw2qebawx/alfaromeo.jpg) no-repeat center center fixed; background-size: cover; } .box:nth-child(2) { background-color: #444; background: url(https://s15.postimg.org/supjogrdn/huawei_poster.jpg) no-repeat center center fixed; background-size: cover; } .box:nth-child(3) { background-color: #444; } .box:nth-child(4) { background-color: #444; } .box:nth-child(5) { background-color: #444; } #logo { border-radius: 50%; position:absolute; z-index:5000; top:20px; left:20px; width: 100px; height: 100px; cursor: pointer; opacity: 0; } #links{z-index:500;position:absolute;bottom:0px;left:0px;width:100%;height:50px;font-size:14px;font-family:tahoma;color:#fff;} #links a{text-decoration:none;font-size:2.3em;color:#fff;} #twitter{position:absolute;bottom:15px;right:20px;} #pens{position:absolute;bottom:15px;left:20px;} #pens a{text-align: super; font-size:1em; font-family: "Open Sans"} #pens span{margin-right: 5px;} #parallax-container{ position: relative; width: 100%; height: 100%; padding: 0px; margin: 0px; } .box1{ position: absolute; /* width: 208px; height: 174px; */ width: 300px; height: 250px; } .box-1{ background-color: #df7b7b; background: url(https://s7.postimg.org/z9llwsezf/alfathumb_1.jpg); top: 30%; left: 12%; background-size: 208px 174px; width: 208px; height: 174px; } .box-2{ background-color: rgba(217,109,187,0.5); background: url(https://s22.postimg.org/bn8wxfv9d/alfathumb_2.jpg); top: 45%; left: 30%; background-size: 300px 250px; } .box-3{ background-color: rgba(13,98,189,0.5); background: url(https://s10.postimg.org/d7rxqeya1/alfathumb_3.jpg); top: 30%; left: 50%; background-size: 208px 174px; width: 208px; height: 174px; } .box-4{ background-color: rgba(13,98,189,0.5); background: url(https://s10.postimg.org/b6hex5kmh/alfathumb_4.jpg); top: 50%; left: 70%; background-size: 208px 174px; width: 208px; height: 174px; } </style></head><body> <div class="box slide"><p class="copytitle">Alfa Romeo</p> <p>Develop a new set of Banners to communicate the Giulia Tecnica to a Fleet target. Focus is to show the car, the interiors, the fleet relevant figures as well as the Finance available. </p> <div id="parallax-container"> <div class="box1 box-1 parallax" data-speed-x="200" data-speed-y="200"></div> <div class="box1 box-2 parallax" data-speed-x="80" data-speed-y="80"></div> <div class="box1 box-3 parallax" data-speed-x="30" data-speed-y="40"></div> <div class="box1 box-4 parallax" data-speed-x="180" data-speed-y="180"></div> </div> </div> <div class="box slide"><p class="copytitle">Jeep</p> <p>Develop a new set of Banners to communicate the Giulia Tecnica to a Fleet target. Focus is to show the car, the interiors, the fleet relevant figures as well as the Finance available. </p></div> <div class="box slide"><p class="copytitle">Mercure</p></div> <div class="box slide"><p class="copytitle">Abath</p></div> <div class="box slide"><p class="copytitle">Fiat</p></div> <div id="nav"> <div id="prevtBtn" class='fa fa-angle-left'></div> <div id="nextBtn" class='fa fa-angle-right'></div> </div> <div id="Dots"></div> <p></p> <!-- <img id='logo' src="https://s10.postimg.org/8w0py18s9/doner_logo.png" height="70" width="70"> --> <div id="logo"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> <g> <path fill="#FFFFFF" d="M131.443,113.265c-0.284-0.84-0.723-1.6-1.101-2.384c0.329,1.593,0.522,3.345,0.522,5.308 c0,3.731-0.594,6.78-1.778,9.168c-1.188,2.365-2.887,4.211-5.085,5.502c-2.21,1.298-4.662,2.206-7.378,2.717 c-2.709,0.503-5.766,0.76-9.16,0.76h-18.87v-7.038h0.004v-16.293h13.133c2.153,0,4.094,0.144,5.812,0.428 c1.725,0.288,3.284,0.863,4.684,1.725c1.4,0.855,2.475,2.043,3.228,3.549s1.135,3.443,1.135,5.812c0,1.237-0.114,2.338-0.318,3.333 c1.729-0.515,3.386-1.146,4.885-2.028c2.206-1.298,3.901-3.137,5.093-5.509c1.177-2.376,3.11-14.246-7.885-18.457 c-3.413-1.302-7.412-1.99-12.002-1.99H71.694v76.871h16.902v-27.565h17.765c4.59,0,8.593-0.666,12.002-1.99 c3.405-1.328,6.194-3.16,8.343-5.49c2.157-2.335,3.731-4.968,4.737-7.912c1.006-2.944,1.506-6.031,1.506-9.263 C132.949,119.293,132.45,116.205,131.443,113.265"></path> </g> <path fill="#FFFFFF" d="M119.216,48.79c0-0.813,0.662-1.472,1.468-1.472c0.814,0,1.472,0.658,1.472,1.472 c0,0.81-0.658,1.464-1.472,1.464C119.878,50.255,119.216,49.6,119.216,48.79 M69.191,53.104c4.522,6.58,10.632,8.979,15.82,9.683 c-3.36,0.356-6.864,0.121-9.668-1.181c-7.56-3.526-12.415-11.268-12.415-11.268s1.022,15.188,12.683,22.165 c4.015,2.406,7.9,2.811,11.23,2.354c-11.068,3.905-22.494,2.792-22.494,2.792s12.823,8.582,28.446,8.392 c-0.231,0.242-0.431,0.5-0.59,0.787c-3.602,6.262,3.281,10.178,3.281,10.178s-3.489-6.989,7.197-12.138 c0.386-0.189,0.885-0.409,1.404-0.628c0.749-0.238,1.498-0.5,2.251-0.791c20.054-7.878,18.93-29.998,18.93-29.998l6.387-4.056 c0,0-15.252-15.298-26.055,7.261c-1.461,3.035-3.307,6.103-5.479,8.831c1.589-3.22,5.57-14.057-10.625-17.674 c-5.43-1.215-11.291-3.708-14.723-7.734c-7.019-8.245-8.559-20.024-8.559-20.024S59.202,38.548,69.191,53.104"></path> </svg> </div> <div id='links'> <!-- <a id='twitter' href="https://twitter.com/doner_agency" target="_blank"><span class='fa fa-twitter'></span></a> --> <!-- <div id='pens'><a href="http://www.doner.com" target="_blank"><span class='fa fa-globe'></span>doner.com</a></div> --> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js'></script> <script >TweenMax.set('body',{perspective:700}); var tlPause = true; var projects = ["Alfa Romeo", "Jeep", "Mercure", "Abarth", "Fiat"]; var slides=document.querySelectorAll('.slide'), tl = new TimelineMax({ paused: tlPause, onComplete:function(){ }, onUpdate:function(){ } }); for(var i = 0; i<slides.length; i++){if (window.CP.shouldStopExecution(1)){break;} var D = document.createElement('div'); D.className = 'Dot'; D.id = 'Dot'+i; var last = slides.length-1; D.addEventListener('click',function(){ tl.seek(this.id).pause(); TweenMax.to(".copytitle", 0.3, {opacity: 0}); TweenMax.to(".slide p:nth-child(2)", 0.3, {opacity: 0}); TweenMax.to("#parallax-container > div", 0.3, {opacity: 0}); TweenMax.delayedCall(0.3, animateTitle); TweenMax.to($(this), 0.5, {y:"-10", fontSize: 18}); if(this.id === 'Dot' + last){ TweenMax.to("#nextBtn", 0.5, {opacity: 0}); }else{ TweenMax.to("#nextBtn", 0.5, {opacity: 1}); } }); document.getElementById('Dots').appendChild(D); if(i != 0){ tl.addPause('Dot'+i); }; console.log("Slides length:" + slides.length + " and i is " + i); if(i!=slides.length-1){ tl .add("label"+i, 0) .set('#Dot'+i,{backgroundColor:'rgba(255,255,255, 0.1)', color:'rgba(255,255,255, 0.1)'}, "lable"+i) .to(slides[i],0.5,{scale:.8, ease:Back.easeOut},'lable'+i) .to(slides[i],0.7,{xPercent:-100,rotationY:80},'lable'+i) .from(slides[i+1],0.7,{xPercent:100,rotationY:-80},'lable'+i) .add(animateTitle, 'lable'+i) .from(slides[i+1],0.5,{scale:.8, ease:Back.easeIn},'lable'+i) ; }; } window.CP.exitedLoop(1); ; for(var i=0;i<slides.length;i++){if (window.CP.shouldStopExecution(2)){break;} $("#Dot"+i).text(projects[i]); } window.CP.exitedLoop(2); function GO(e){ var SD=isNaN(e)?e.wheelDelta||-e.detail:e; if(SD<0){ tl.play() TweenMax.to(".copytitle", 0.3, {opacity: 0}); TweenMax.to(".slide p:nth-child(2)", 0.3, {opacity: 0}); TweenMax.to("#parallax-container > div", 0.3, {opacity: 0}); }else{ tl.reverse() TweenMax.to("#nextBtn", 0.5, {opacity: 1}); TweenMax.to(".copytitle", 0.3, {opacity: 0}); TweenMax.to(".slide p:nth-child(2)", 0.3, {opacity: 0}); TweenMax.to("#parallax-container > div", 0.3, {opacity: 0}); }; }; document.addEventListener("mousewheel",GO); document.addEventListener("DOMMouseScroll",GO); document.getElementById('nextBtn').addEventListener("click",function(){GO(-1)}); document.getElementById('prevtBtn').addEventListener("click",function(){GO(1)}); function animateTitle() { var tltext = new TimelineLite, mySplitText = new SplitText(".copytitle", {type:"words,chars"}), chars = mySplitText.chars; //an array of all the divs that wrap each character TweenMax.set(".copytitle", {perspective:400, opacity:1}); TweenMax.set(".slide p:nth-child(2)", {perspective:400, opacity:1}); TweenMax.set("#parallax-container > div", {perspective:400, opacity:1}); tltext.staggerFrom(chars, 1, {opacity:0, x:"+=250", delay: 0.3, scale:1.2, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.05, "-=0"); TweenMax.from(".slide p:nth-child(2)", 1.5, {x:"+=150", opacity: 0, delay:1.5, ease:Back.easeOut, force3D:true}); TweenMax.staggerFrom("#parallax-container > div", 1.5, {x:"+=500", opacity:0, delay:2, ease:Back.easeOut, force3D:true}, 0.2); }; animateTitle(); $('#logo').click(function() { location.removedByCodePen(); console.log("logotype clicked"); }); TweenMax.staggerFrom("#Dots > div", 1.5, {y:"+=30", opacity:0, delay:2, ease:Back.easeOut, force3D:true}, 0.2); TweenMax.staggerFrom("#nav > div", 1.5, {y:"+=30", delay:2, ease:Back.easeOut, force3D:true}, 0.2); // var $parallaxContainer = $("#parallax-container"); //our container // var $parallaxItems = $parallaxContainer.find(".parallax"); //elements // var fixer = 0.0008; //experiment with the value // $(document).on("mousemove", function(event){ // var pageX = event.pageX - ($parallaxContainer.width() * 0.5); //get the mouseX - negative on left, positive on right // var pageY = event.pageY - ($parallaxContainer.height() * 0.5); //same here, get the y. use console.log(pageY) to see the values // //here we move each item // $parallaxItems.each(function(){ // var item = $(this); // var speedX = item.data("speed-x"); // var speedY = item.data("speed-y"); // TweenLite.to(item, 0.5, { // x: (item.position().left + pageX * speedX )*fixer, //calculate the new X based on mouse position * speed // y: (item.position().top + pageY * speedY)*fixer // }); // //or use set - not so smooth, but better performance // // TweenLite.set(item, { // // x: (item.position().left + pageX * speedX )*fixer, // // y: (item.position().top + pageY * speedY)*fixer // // }); // }); // }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: