I have two div those contain h tag inside which I have a span tag those contain letters
First Div
<div class="startname">
<h6 class="alphabets" >
<span class="letters">A</span>
<span class="letters">B</span>
<span class="letters">C</span>
<span class="letters">D</span>
<span class="letters">E</span>
<span class="letters">F</span>
</h6>
</div>
Second Div
<div class="endname">
<h6 class="alphabets" >
<span class="letters">G</span>
<span class="letters">H</span>
<span class="letters"> </span>
<span class="letters">I</span>
<span class="letters">J</span>
</h6>
</div>
First div starts from left top of the screen and scales to a particular location using keyframe
Second div starts from few pixels below the first div of the screen and scales to a particular location using keyframe
I want letters EF in startname and <whitespace>IJ in lastname to disappear after few seconds of startname and lastname align
Here's the code I found which pages div disappear after few seconds
Tried it out in svelte doesn't seem to be working here's the entire code below. How do I achieve the desired result?
<script>
window.onload = function() {
window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
document.getElementById('fadeout').style.opacity = '0';
}
</script>
<style>
.startname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: startnamemymove 5s 1 forwards;
display: flex;
align-items: center;
justify-content:flex-end;
}
#fadeout {
opacity: 1;
transition: 3s opacity;
}
.endname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: endnamemymove 5s 1 forwards;
display: flex;
align-items: center;
}
#keyframes startnamemymove {
from {top: 0px;
left:0px;
transform: scale(.5);}
to {top:150px;left: 200px;
transform: scale(2.0);
}
}
#keyframes endnamemymove {
from {top: 100px;
left:100px;
transform: scale(.5);}
to {top:0px;left: 500px;
transform: scale(2.0);
}
}
</style>
<h1>The #keyframes Rule</h1>
<div class="startname">
<h6 class="alphabets" >
<span class="letters">A</span>
<span class="letters">B</span>
<span class="letters">C</span>
<span class="letters">D</span>
<span class="letters" id="fadeout">E</span>
<span class="letters" id="fadeout">F</span>
</div>
<div class="endname">
<h6 class="alphabets" >
<span class="letters">G</span>
<span class="letters">H</span>
<span class="letters" id="fadeout"> </span>
<span class="letters" id="fadeout">I</span>
<span class="letters" id="fadeout">J</span>
</h6>
</div>
Here's a solution with these modifications:
set the transition class after a timeout via Svelte's use:action
(the class has to have the :global() flag so it gets compiled even though the class is not directly used. And both classes are needed :global(.letters.fadeout) so that the specificity is enough to overwrite the setting of the first class, because these elements have the Svelte suffix added .letters.svelte-5nw7mj)
get rid of the whitespace between <span> elements by setting display:flex on the <h6> (a question on this)
if the width should be animated, it must be set before on the <span> elements. This can be done by giving them display: inline-block; and the desired width
->> a REPL
(I reduced the time to 3s so it was faster to try out...)
<script>
function handleFadeout(node) {
setTimeout(() => {
node.classList.add('fadeout')
},3000)
}
</script>
<h1>The #keyframes Rule</h1>
<div class="startname">
<h6 class="alphabets" >
<span class="letters">A</span>
<span class="letters">B</span>
<span class="letters">C</span>
<span class="letters">D</span>
<span class="letters" use:handleFadeout>E</span>
<span class="letters" use:handleFadeout>F</span>
</h6>
</div>
<div class="endname">
<h6 class="alphabets" >
<span class="letters">G</span>
<span class="letters">H</span>
<span class="letters" use:handleFadeout> </span>
<span class="letters" use:handleFadeout>I</span>
<span class="letters" use:handleFadeout>J</span>
</h6>
</div>
<style>
.startname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: startnamemymove 3s 1 forwards;
display: flex;
align-items: center;
justify-content:flex-end;
}
.endname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: endnamemymove 3s 1 forwards;
display: flex;
align-items: center;
}
#keyframes startnamemymove {
from {top: 0px;
left:0px;
transform: scale(.5);}
to {top:150px;left: 200px;
transform: scale(2.0);
}
}
#keyframes endnamemymove {
from {top: 100px;
left:100px;
transform: scale(.5);}
to {top:0px;left: 500px;
transform: scale(2.0);
}
}
.letters {
display: inline-block;
width: 12px;
}
h6 {
display:flex;
}
:global(.letters.fadeout) {
opacity: 0;
width: 0px;
padding: 0;
overflow: hidden;
transition: all 300ms;
}
</style>
You can't use same id in several elements. Please use class.
The method getElementById() will return only the first element with that id. You can use classes and getElementsByClassName(), which returns the list of elements with that class name. Here is the code.
The error is on repeating id fadeout more than once.
You need to create a new class with the styles you want and put it together with letters: class="letters fadeout". Just a space between.
Read more here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors
Here is the result which can help you.
Steps need to remember
HTML attribute ID will be use on single element
You can use getElementsByClassName() or querySelectorAll() to apply opacity in multiple elements.
window.onload = function() {
window.setTimeout(fadeout, 4000); //8 seconds
}
function fadeout() {
document.querySelectorAll('span.fadeout').forEach(el => {
el.style.display = "none";
});
}
.startname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: startnamemymove 5s 1 forwards;
display: flex;
align-items: center;
justify-content:flex-end;
padding-right: 10px;
}
.fadeout {
opacity: 1;
transition: 3s opacity;
}
.endname {
width: 150px;
height: 150px;
background: red;
position: relative;
animation: endnamemymove 5s 1 forwards;
display: flex;
align-items: center;
}
#keyframes startnamemymove {
from {top: 0px;
left:0px;
transform: scale(.5);}
to {top:150px;left: 200px;
transform: scale(2.0);
}
}
#keyframes endnamemymove {
from {top: 100px;
left:100px;
transform: scale(.5);}
to {top:0px;left: 500px;
transform: scale(2.0);
}
}
<h1>The #keyframes Rule</h1>
<div class="startname">
<h6 class="alphabets" >
<span class="letters">A</span>
<span class="letters">B</span>
<span class="letters">C</span>
<span class="letters">D</span>
<span class="letters fadeout">E</span>
<span class="letters fadeout">F</span>
</h6>
</div>
<div class="endname">
<h6 class="alphabets" >
<span class="letters">G</span>
<span class="letters">H</span>
<span class="letters fadeout"> </span>
<span class="letters fadeout">I</span>
<span class="letters fadeout">J</span>
</h6>
</div>
I am starting with JS and I would like to make the block on the following code appear after 10 seconds.
https://jsfiddle.net/74hmx0vb/1
<div class='popup1' id="popup1">
<div class="container">
<div class="row rowpopup">
<div class="iconpopup">
<img class="imgpopup" src="" />
</div>
<div class="textpopup">
<div class="textpopup1">
</div>
<div class="textpopup2">
</div>
</div>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
I would also like to add a slide-in transition when the block appears.
How to do that?
This is using CSS for the animation.
Move .popup1 out of the view to prepare for its animation by setting left: -350px;
Then #keyframes leftSlideIn will contain the style to animate into.
Finally, get .popup1 to animate using leftSlideIn.
animation-fill-mode of forwards will keep the last keyframe state after animation ends.
.popup1 {
height: 100px;
width: 300px;
position: fixed;
z-index: 99999;
background: white;
bottom: 50px;
left: -350px;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
animation: 1s leftSlideIn forwards;
animation-delay: 10s;
}
#keyframes leftSlideIn {
to {
left: 50px;
}
}
.rowpopup {
display: inline-flex;
}
.textpopup {
padding: 10px;
margin-top: -15px;
}
.textpopup1 {
font-size: 16px;
}
.textpopup2 {
font-size: 14px;
}
.iconpopup {
padding: 10px;
}
.imgpopup {
width: 30px;
}
.hidepopup {
display: none !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="popup1" id="popup1">
<div class="container">
<div class="row rowpopup">
<div class="iconpopup">
<img
class="imgpopup"
src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339"
/>
</div>
<div class="textpopup">
<div class="textpopup1">
Order as soon as possible
</div>
<div class="textpopup2">
there is little time remaining for this deal to end
</div>
</div>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
Here is a jQuery- CSS solution. I have added the hidepopup class to the main div of you content. I remove it after 10 seconds and add the animation class.
$(document).ready(function(){
setTimeout(displayBox, 10000);
});
function displayBox(){
$('.popup1').removeClass('hidepopup');
$('.popup1').addClass('anim-effect ');
}
.popup1 {
height: 100px;
width:300px;
position: fixed;
z-index: 99999;
background: white;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0,0,0,0.45);
}
.anim-effect{
bottom: 50px;
left:50px;
-webkit-animation: slideIn 1s forwards;
-moz-animation: slideIn 1s forwards;
animation: slideIn 1s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
.rowpopup {
display: inline-flex;
}
.textpopup {
padding: 10px;
margin-top: -15px;
}
.textpopup1 {
font-size:16px;
}
.textpopup2 {
font-size:14px;
}
.iconpopup {
padding:10px;
}
.imgpopup {
width:30px;
}
.hidepopup {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class='popup1 hidepopup' id="popup1">
<div class="container">
<div class="row rowpopup">
<div class="iconpopup">
<img class="imgpopup" src="https://cdn.shopify.com/s/files/1/0076/6931/7690/files/clock2.png?8339" />
</div>
<div class="textpopup">
<div class="textpopup1">
Order as soon as possible
</div>
<div class="textpopup2">
there is little time remaining for this deal to end
</div>
</div>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
document.getElementById("div_to_display").style.display="block"},time);
so the sample code will look like this
document.getElementById("textpopup1").style.display="block"},10000);
the textpopup1 will display after 10 seconds.
I am building a quiz which will consist of a number of slides, while going between the slides using I want to apply a transition similar to this site where the next card slides in slightly.
I have tried applying the transition on my .active classes but this doesn't appear to have any affect.
CodePen
HTML:
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
CSS:
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
display: block;
margin-left: 0px;
transition: 2s;
/*transform:translate(0);*/
}
JS:
$(document).ready(function() {
$( ".first-btn" ).click(function() {
console.log( "Handler for .click() called." );
$(".card1").toggleClass('active');
$(".card2").toggleClass('active');
});
});
It's because your active card was not showing, I've tried to show your card2 first and call setTimeout to toggleClass, and it works:
$(document).ready(function() {
$( ".first-btn" ).on('click', function() {
$(".card1").toggleClass('active');
$(".card2").show();
setTimeout(() => {
$(".card2").toggleClass('active');
}, 10)
});
});
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
transition: all 1s ease-in-out;
display: block;
margin-left: 0px;
/*transform:translate(0);*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
You're using the wrong property, you want
transition-duration: 2s;
But this belongs under .card so it looks more like this:
.card {
display: none;
margin-left: 50px;
transition-duration: 2s;
}
.card.active {
display: block;
margin-left: 0px;
/*transform:translate(0);*/
//more .active css...
}
here's some more info
https://www.w3schools.com/csSref/css3_pr_transition-duration.asp
I believe this is what you are missing:
.card.active {
display: block;
margin-left: 0px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
You could check the following fiddle or check codepen fork:
$(document).ready(function() {
$( ".first-btn" ).click(function() {
console.log( "Handler for .click() called." );
$(".card1").toggleClass('active');
$(".card2").toggleClass('active');
});
});
.main-row {
/*border: 1px solid red;*/
height: 80vh;
}
.diagonal-stripe-1 { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="); background-repeat: repeat; }
/* CARD STYLES */
.card {
display: none;
margin-left: 50px;
}
.card.active {
display: block;
margin-left: 0px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
/*transform:translate(0);*/
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row main-row align-items-center diagonal-stripe-1">
<div class="col d-flex justify-content-center">
<div class="card card1 w-50 active">
<div class="card-body text-center">
<h5 class="card-title">Questionnaire</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
<div class="card card2 w-50">
<div class="card-body text-center">
<h5 class="card-title">Next Question Goes Here</h5>
<p class="card-text">This is some example text to show on landing page for questionnaire.</p>
Get Started
</div>
</div>
</div>
</div>
</div>
See link for more details regarding CSS Animations and Transitions
I have this simple set of CSS animations that I want to run indefinitely. But for some reason, it only runs twice and stops.
Here's a CodePen example.
Here is how I implement it using Jquery (this is also seen on the code)
$('#slide1').one(animationEnd, () => {
$('#slide1').css('display', 'none').removeClass('animate-1')
$('#slide2').css('display', '').addClass('animate-2')
})
$('#slide2').one(animationEnd, () => {
$('#slide2').css('display', 'none').removeClass('animate-2')
$('#slide3').css('display', '').addClass('animate-3')
})
$('#slide3').one(animationEnd, () => {
$('#slide3').css('display', 'none').removeClass('animate-3')
$('#slide1').css('display', '').addClass('animate-1')
})
See that #slide3 should revert to #slide1 for animation. It did, but it stops after 2 cycles.
You have defined counter variable as const, but it needs to be let to allow later reassignment.
let counter = 0;
Also you need to use $.on instead of $.one when binding to the animation end. $.on is used to bind handler to some event (every time it occurres), while $.one is used for one time binding only (run the handler first time the event occurres, but no more that that).
Here is your updated example:
https://codepen.io/anon/pen/WXNOKQ
answer already given and accepted, this is only for infos since the javaScript takes only three boxes into account.
animation-delay can be used to keep animation looping infinitly:
body {
color: #FFFFFF;
background-color: #27292d;
overflow: hidden;
background: #27292d url('bg.jpg') no-repeat fixed center;
font-family: 'Roboto', sans-serif;
}
.slider-container {
position: absolute;
right: 0;
top: 40%;
}
.slider-content {
position: relative;
font-size: 32px;
text-transform: uppercase;
}
.boxes {
float: left;
padding: 10px 20px;
margin: 5px;
position: relative;
}
.sub-box {
clear: both;
margin-left: 60px;
}
.sub-box span {
color: #000000;
padding: 10px 20px;
background-color: #FFFFFF;
}
.box1 {
background-color: #FF4F80;
}
.box2 {
background-color: #4CA2F0;
}
.box3 {
background-color: #53CEC8;
}
#keyframes heartbeat {
0% {
transform: translate(100px, 200px) scale(0)
}
50% {
transform: translate(100px, 200px) scale(0)
}
60% {
transform: translate(-100px) scale(1.5)
}
70% {
transform: translate(-100px) scale(1.5)
}
80% {
transform: translate(-100px) scale(1.5)
}
100% {
transform: translate(100px, -200px) scale(0)
}
}
.slider-single {
position: absolute;
right: 0;
width: 400px;
height: 50px;
margin: 20px;
transform: scale(0);
}
.animate-1 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -3s infinite;
}
.animate-2 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s -1s infinite;
}
.animate-3 {
transition: 300ms cubic-bezier(.17, .67, .55, 1.43);
animation: ease-out heartbeat 6s 1s infinite;
}
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single animate-2">
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single animate-3">
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>
<div class="slider-container">
<div class="slider-content">
<div id='slide1' class="slider-single animate-1">
<div class=''>
<p class='boxes box1'>Pink Header</p>
</div>
<div class='sub-box'>
<span>White Header</span>
</div>
</div>
<div id='slide2' class="slider-single" style='display:none;'>
<div>
<p class='boxes box2'>Another Header</p>
</div>
<div class='sub-box'>
<span>subheader</span>
</div>
</div>
<div id='slide3' class="slider-single" style='display:none;'>
<div>
<p class='boxes box3'>10 more to go</p>
</div>
</div>
</div>
</div>
I don't have much experience with HTML and CSS. I have a website with PagePiling.js scrolling. I want to let the color of my logo image and nav text change when I scroll to the next section, but just the part of the logo and nav that "crossed" the next section needs to change (I'm sorry, my English is not that good. Don't know how to explain this). That means that when the logo and nav text reach the grey section, they have to become a different color like red or something. Look at this code I found on CodePen, the part of the text which is still scrolled in the grey section is black, the part which is in the blue section is white. I've hosted my site at http://informatica.thebrandcode.nl/.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>InGadget | Dé site voor al uw gadget nieuws!</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.pagepiling.js"></script>
<script>
$(document).ready(function() {
$('#pagepiling').pagepiling();
});
</script>
</head>
<body>
<div class="navbar">
<a id="logo" href="index.html"></a>
<div class="nav">
Home
Nieuws
Forum
Things I ❤
Contact
</div>
</div>
<div id="pagepiling">
<div class="section" id="header">
<div class="header-content-container">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
</div>
</div>
</div>
<div class="section" id="section1">
Placheholder
</div>
<div class="section" id="section2">
Placheholder
</div>
<div class="section" id="section3">
Placheholder
</div>
</div>
</body>
</html>
CSS:
/* BASICS */
#font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}
#font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}
html, body {
overflow:hidden;
margin: 0;
padding: 0;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* PAGEPILING */
.pp-section {
height:100%;
position:absolute;
width:100%;
}
.pp-easing {
-webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
-moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
-o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
/* custom */
}
.pp-section.pp-table{
display: table;
}
.pp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.pp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
}
.pp-tooltip.right {
right: 20px;
}
.pp-tooltip.left {
left: 20px;
}
.pp-scrollable{
overflow-y: scroll;
height: 100%;
}
/* NAVBAR */
.navbar {
width: 80%;
margin: auto;
left: 0;
right: 0;
height: 150px;
position: fixed;
z-index: 999;
}
#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo2.png) no-repeat;
background-size: contain;
float: left;
}
.nav {
float: right;
right: 0px;
}
.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #000000;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.nav a:hover {
text-decoration: underline;
}
/* SECTIONS */
#header {
background-color: #ffffff;
}
.header-content-container {
position: absolute;
bottom: 20px;
width: 100%;
}
.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #000000;
text-align: right;
}
#section1 {
background-color: #f2f2f2;
}
#section2 {
background-color: #ffffff;
}
#section3 {
background-color: #f2f2f2;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pagePiling.js plugin</title>
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400,700" />
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function(){
$('#pp-nav').addClass('custom');
},
afterLoad: function(anchorLink, index){
if(index>1){
$('#pp-nav').removeClass('custom');
}else{
$('#pp-nav').addClass('custom');
}
}
});
/*
* Internal use of the demo website
*/
$('#showExamples').click(function(e){
e.stopPropagation();
e.preventDefault();
$('#examplesList').toggle();
});
$('html').click(function(){
$('#examplesList').hide();
});
});
</script>
</head>
<body>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=alvarotrigo&repo=pagePiling.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="152" height="20" id="starGithub"></iframe>
<ul id="menu">
<li data-menuanchor="page1" class="active">Page 1</li>
<li data-menuanchor="page2">Page 2</li>
<li data-menuanchor="page3">Page 3</li>
<li data-menuanchor="page4">Page 4</li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<h1>pagePiling.js</h1>
<p>Create an original scrolling site</p>
<img src="http://alvarotrigo.com/pagePiling/imgs/pagePiling-plugin.gif" alt="pagePiling" />
<br />
<div id="download">Download</div><br />
<p id="donations">
<a href="http://vk.cc/35R1HD">
Donations will be appreciated!</a></p>
</div>
<div class="section" id="section2">
<div class="intro">
<div id="colors"></div>
<h1>jQuery plugin</h1>
<p>Pile your sections one over another and access them scrolling or by URL!</p>
<div id="markup">
</div>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Configurable</h1>
<p>Plenty of options, methods and callbacks to use.</p>
<div id="colors2"></div>
<div id="colors3"></div>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<h1>Compatible</h1>
<p>Designed to work on tablet and mobile devices.</p>
<p>Oh! And its compatible with old browsers such as IE 8 or Opera 12!</p>
</div>
</div>
</div>
<div id="infoMenu">
<ul>
<li>Download</li>
<li>
Examples
<div id="examplesList">
<div class="column">
<h3>Navigation</h3>
<ul>
<li>Horizontal scroll</li>
<li>Without anchor links (same URL)</li>
<li>Looping</li>
</ul>
</div>
<div class="column">
<h3>Design</h3>
<ul>
<li>Full backgrounds</li>
<li>Full background videos</li>
</ul>
</div>
<div class="column">
<h3>Callbacks</h3>
<ul>
<li>Callbacks</li>
</ul>
</div>
</div>
</li>
<li>Documentation</li>
<li>Contact</li>
</ul>
</div>
</body>
*JS**
1
/* ===========================================================
2
* pagepiling.js 0.0.8 (Beta)
3
*
4
* https://github.com/alvarotrigo/pagePiling.js
5
* MIT licensed
6
*
7
* Copyright (C) 2014 alvarotrigo.com - A project by Alvaro Trigo
8
*
9
* ========================================================== */
10
11
(function(b){b.fn.pagepiling=function(c){function A(a){var c=b(".pp-section.active").index(".pp-section");a=a.index(".pp-section");return c>a?"up":"down"}function g(a,f){var d={destination:a,animated:f,activeSection:b(".pp-section.active"),anchorLink:a.data("anchor"),sectionIndex:a.index(".pp-section"),toMove:a,yMovement:A(a),leavingSection:b(".pp-section.active").index(".pp-section")+1};d.activeSection.is(a)||("undefined"===typeof d.animated&&(d.animated=!0),"undefined"!==typeof d.anchorLink&&c.anchors.length&&
12
(location.hash=d.anchorLink),d.destination.addClass("active").siblings().removeClass("active"),d.sectionsToMove=B(d),"down"===d.yMovement?(d.translate3d="vertical"!==c.direction?"translate3d(-100%, 0px, 0px)":"translate3d(0px, -100%, 0px)",d.scrolling="-100%",c.css3||d.sectionsToMove.each(function(a){a!=d.activeSection.index(".pp-section")&&b(this).css(m(d.scrolling))}),d.animateSection=d.activeSection):(d.translate3d="translate3d(0px, 0px, 0px)",d.scrolling="0",d.animateSection=a),b.isFunction(c.onLeave)&&
13
c.onLeave.call(this,d.leavingSection,d.sectionIndex+1,d.yMovement),C(d),D(d.anchorLink),E(d.anchorLink,d.sectionIndex),r=d.anchorLink,s=(new Date).getTime())}function C(a){c.css3?(t(a.animateSection,a.translate3d,a.animated),a.sectionsToMove.each(function(){t(b(this),a.translate3d,a.animated)}),setTimeout(function(){u(a)},c.scrollingSpeed)):(a.scrollOptions=m(a.scrolling),a.animated?a.animateSection.animate(a.scrollOptions,c.scrollingSpeed,c.easing,function(){n(a);n(a)}):(a.animateSection.css(m(a.scrolling)),
14
setTimeout(function(){n(a);u(a)},400)))}function u(a){b.isFunction(c.afterLoad)&&c.afterLoad.call(this,a.anchorLink,a.sectionIndex+1)}function B(a){return"down"===a.yMovement?b(".pp-section").map(function(c){if(c<a.destination.index(".pp-section"))return b(this)}):b(".pp-section").map(function(c){if(c>a.destination.index(".pp-section"))return b(this)})}function n(a){"up"===a.yMovement&&a.sectionsToMove.each(function(c){b(this).css(m(a.scrolling))})}function m(a){return"vertical"===c.direction?{top:a}:
15
{left:a}}function p(){return(new Date).getTime()-s<600+c.scrollingSpeed?!0:!1}function t(a,b,c){a.toggleClass("pp-easing",c);a.css({"-webkit-transform":b,"-moz-transform":b,"-ms-transform":b,transform:b})}function h(a){if(!p()){a=window.event||a;a=Math.max(-1,Math.min(1,a.wheelDelta||-a.deltaY||-a.detail));var c=b(".pp-section.active"),c=v(c);0>a?k("down",c):k("up",c);return!1}}function k(a,c){if("down"==a)var d="bottom",e=b.fn.pagepiling.moveSectionDown;else d="top",e=b.fn.pagepiling.moveSectionUp;
16
if(0<c.length)if(isScrolled(d,c))e();else return!0;else e()}function v(a){return scrollable=a.find(".pp-scrollable")}function w(){return window.PointerEvent?{down:"pointerdown",move:"pointermove",up:"pointerup"}:{down:"MSPointerDown",move:"MSPointerMove",up:"MSPointerUp"}}function x(a){var b=[];window.navigator.msPointerEnabled?(b.y=a.pageY,b.x=a.pageX):(b.y=a.touches[0].pageY,b.x=a.touches[0].pageX);return b}function F(a){a=x(a.originalEvent);l=a.y;touchStartX=a.x}function G(a){var f=a.originalEvent;
17
y(a.target)||(a.preventDefault(),a=b(".pp-section.active"),a=v(a),p()||(f=x(f),touchEndY=f.y,touchEndX=f.x,"horizontal"===c.direction&&Math.abs(touchStartX-touchEndX)>Math.abs(l-touchEndY)?Math.abs(touchStartX-touchEndX)>e.width()/100*c.touchSensitivity&&(touchStartX>touchEndX?k("down",a):touchEndX>touchStartX&&k("up",a)):Math.abs(l-touchEndY)>e.height()/100*c.touchSensitivity&&(l>touchEndY?k("down",a):touchEndY>l&&k("up",a))))}function y(a,f){f=f||0;var d=b(a).parent();return f<c.normalScrollElementTouchThreshold&&
18
d.is(c.normalScrollElements)?!0:f==c.normalScrollElementTouchThreshold?!1:y(d,++f)}function H(){b("body").append('<div id="pp-nav"><ul></ul></div>');var a=b("#pp-nav");a.css("color",c.navigation.textColor);a.addClass(c.navigation.position);for(var f=0;f<b(".pp-section").length;f++){var d="";c.anchors.length&&(d=c.anchors[f]);if("undefined"!==typeof c.navigation.tooltips){var e=c.navigation.tooltips[f];"undefined"===typeof e&&(e="")}a.find("ul").append('<li data-tooltip="'+e+'"><span></span></li>')}a.find("span").css("border-color",
19
c.navigation.bulletsColor)}function E(a,f){c.navigation&&(b("#pp-nav").find(".active").removeClass("active"),a?b("#pp-nav").find('a[href="#'+a+'"]').addClass("active"):b("#pp-nav").find("li").eq(f).find("a").addClass("active"))}function D(a){c.menu&&(b(c.menu).find(".active").removeClass("active"),b(c.menu).find('[data-menuanchor="'+a+'"]').addClass("active"))}function I(){var a=document.createElement("p"),b,c={webkitTransform:"-webkit-transform",OTransform:"-o-transform",msTransform:"-ms-transform",
20
MozTransform:"-moz-transform",transform:"transform"};document.body.insertBefore(a,null);for(var e in c)void 0!==a.style[e]&&(a.style[e]="translate3d(1px,1px,1px)",b=window.getComputedStyle(a).getPropertyValue(c[e]));document.body.removeChild(a);return void 0!==b&&0<b.length&&"none"!==b}var e=b(this),r,s=0,z="ontouchstart"in window||0<navigator.msMaxTouchPoints,l=touchStartX=touchEndY=touchEndX=0;c=b.extend({direction:"vertical",menu:null,verticalCentered:!0,sectionsColor:[],anchors:[],scrollingSpeed:700,
21
easing:"swing",loopBottom:!1,loopTop:!1,css3:!0,navigation:{textColor:"#000",bulletsColor:"#000",position:"right",tooltips:["section1","section2","section3","section4"]},normalScrollElements:null,normalScrollElementTouchThreshold:5,touchSensitivity:5,keyboardScrolling:!0,sectionSelector:".section",animateAnchor:!1,afterLoad:null,onLeave:null,afterRender:null},c);b.fn.pagepiling.setScrollingSpeed=function(a){c.scrollingSpeed=a};b.fn.pagepiling.setMouseWheelScrolling=function(a){a?e.get(0).addEventListener?
22
(e.get(0).addEventListener("mousewheel",h,!1),e.get(0).addEventListener("wheel",h,!1)):e.get(0).attachEvent("onmousewheel",h):e.get(0).addEventListener?(e.get(0).removeEventListener("mousewheel",h,!1),e.get(0).removeEventListener("wheel",h,!1)):e.get(0).detachEvent("onmousewheel",h)};b.fn.pagepiling.setAllowScrolling=function(a){a?(b.fn.pagepiling.setMouseWheelScrolling(!0),z&&(MSPointer=w(),e.off("touchstart "+MSPointer.down).on("touchstart "+MSPointer.down,F),e.off("touchmove "+MSPointer.move).on("touchmove "+
23
MSPointer.move,G))):(b.fn.pagepiling.setMouseWheelScrolling(!1),z&&(MSPointer=w(),e.off("touchstart "+MSPointer.down),e.off("touchmove "+MSPointer.move)))};b.fn.pagepiling.setKeyboardScrolling=function(a){c.keyboardScrolling=a};b.fn.pagepiling.moveSectionUp=function(){var a=b(".pp-section.active").prev(".pp-section");!a.length&&c.loopTop&&(a=b(".pp-section").last());a.length&&g(a)};b.fn.pagepiling.moveSectionDown=function(){var a=b(".pp-section.active").next(".pp-section");!a.length&&c.loopBottom&&
24
(a=b(".pp-section").first());a.length&&g(a)};b.fn.pagepiling.moveTo=function(a){var c="",c=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".pp-section").eq(a-1);0<c.length&&g(c)};b(c.sectionSelector).each(function(){b(this).addClass("pp-section")});c.css3&&(c.css3=I());b(e).css({overflow:"hidden","-ms-touch-action":"none","touch-action":"none"});b.fn.pagepiling.setAllowScrolling(!0);b.isEmptyObject(c.navigation)||H();var q=b(".pp-section").length;b(".pp-section").each(function(a){b(this).data("data-index",
25
a);b(this).css("z-index",q);a||0!==b(".pp-section.active").length||b(this).addClass("active");"undefined"!==typeof c.anchors[a]&&b(this).attr("data-anchor",c.anchors[a]);"undefined"!==typeof c.sectionsColor[a]&&b(this).css("background-color",c.sectionsColor[a]);c.verticalCentered&&b(this).addClass("pp-table").wrapInner('<div class="pp-tableCell" style="height:100%" />');q-=1}).promise().done(function(){c.navigation&&(b("#pp-nav").css("margin-top","-"+b("#pp-nav").height()/2+"px"),b("#pp-nav").find("li").eq(b(".pp-section.active").index(".pp-section")).find("a").addClass("active"));
26
b(window).on("load",function(){var a=window.location.hash.replace("#",""),a=b('.pp-section[data-anchor="'+a+'"]');0<a.length&&g(a,c.animateAnchor)});b.isFunction(c.afterRender)&&c.afterRender.call(this)});b(window).on("hashchange",function(){var a=window.location.hash.replace("#","").split("/")[0];a.length&&a&&a!==r&&(a=isNaN(a)?b('[data-anchor="'+a+'"]'):b(".pp-section").eq(a-1),g(a))});b(document).keydown(function(a){if(c.keyboardScrolling&&!p())switch(a.which){case 38:case 33:b.fn.pagepiling.moveSectionUp();
27
break;case 40:case 34:b.fn.pagepiling.moveSectionDown();break;case 36:b.fn.pagepiling.moveTo(1);break;case 35:b.fn.pagepiling.moveTo(b(".pp-section").length);break;case 37:b.fn.pagepiling.moveSectionUp();break;case 39:b.fn.pagepiling.moveSectionDown()}});c.normalScrollElements&&(b(document).on("mouseenter",c.normalScrollElements,function(){b.fn.pagepiling.setMouseWheelScrolling(!1)}),b(document).on("mouseleave",c.normalScrollElements,function(){b.fn.pagepiling.setMouseWheelScrolling(!0)}));b(document).on("click touchstart",
28
"#pp-nav a",function(a){a.preventDefault();a=b(this).parent().index();g(b(".pp-section").eq(a))});b(document).on({mouseenter:function(){var a=b(this).data("tooltip");b('<div class="pp-tooltip '+c.navigation.position+'">'+a+"</div>").hide().appendTo(b(this)).fadeIn(200)},mouseleave:function(){b(this).find(".pp-tooltip").fadeOut(200,function(){b(this).remove()})}},"#pp-nav li")}})(jQuery);
Please check this link:-http://codepen.io/blossk/pen/aFbIo
You forgot the javascript part that does all the magic..
As shown in your example from CodePen:
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};
$(document).scroll(function() {logoSwitch();});
logoSwitch();