<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>
