transition-group with v-show not working in vue2

transition-group with v-show not working in vue2 - javascript

I want to add some transition-delay effects to each element in transition-group,but something really weird happens.
The first time come and leave works fine,but the second time come and leave both not working.
I thought of many reasons such as key problem,transition style problem,element style problem,but all failed. Maybe settimeout function in js callback can solve it, but is there another way?
I made a simple transition element as comparison,it works fine.
I'll be appreciate if someone can spend time working out this issue.
here are code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show标签过渡实现特效单项目探究</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<button #click="isShow2=!isShow2">显示/隐藏</button>
<transition
name="hello"
appear
>
<div class="divwidth" v-show="isShow2" :style="[{transition :'500ms'},{transitionDelay:100+'ms'}]">
<span class="content">英语第1次考试</span>
</div>
</transition>
<button #click="isShow=!isShow">显示/隐藏</button>
<Transition-group
name="hello"
appear
>
<div class="divwidth" v-show="isShow" key="11" :style="[{transition :'500ms'},{transitionDelay:100+'ms'}]">
<span class="content">英语第1次考试</span>
</div>
<div class="divwidth" v-show="isShow" key="12" :style="[{transition :'300ms'},{transitionDelay:100+'ms'}]">
<span class="content">英语第2次考试</span>
</div>
</Transition-group>
</div>
</body>
<script>
new Vue({
el: "#root",
data() {
return {
isShow: true,
isShow2: true
}
},
})
</script>
<style>
.divwidth {
width: 60%;
margin-top: 15px;
}
.content {
/*background-image: linear-gradient(red, yellow, blue);用于创建一个线性渐变的" 图像 "*/
background-color: orange;
width: auto;
/*margin: 20px;*/
/*margin-top: 0px;*/
/*padding-top: 10px;*/
padding: 6px;
font-size: 20px;
border: 10px;
border-radius: 8px;
/*line-height: 30px;*/
}
/*.hello-enter-active, .hello-leave-active {*/
/* transition: 300ms linear;*/
/* !*transition-delay:200ms*!*/
/*}*/
.hello-enter, .hello-leave-to {
opacity: 0;
transform: translateX(50%);
}
/*.hello-move { transition: all 0.6s ease; }*/
/*.hello-leave-active{*/
/* position: absolute; */
/*}*/
</style>
</html>
I tried v-if,it works fine,but I don't want to get rid of elements from DOM .
as to v-show I thought of many reasons such as key problem,transition style problem,element style problem,but all failed.
I expect to see transition effects happens every time i click the button,but in my example ,effects failed at second time come and leave.

for me the is working:
vue docomotion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>v-show标签过渡实现特效单项目探究</title>
</head>
<body>
<div id="root">
<button #click="isShow2=!isShow2">显示/隐藏</button>
<transition name="hello" appear>
<div class="divwidth" v-show="isShow2" :style="[{transition :'500ms'},{transitionDelay:100+'ms'}]">
<span class="content">英语第1次考试</span>
</div>
</transition>
<button #click="isShow=!isShow">显示/隐藏</button>
<transition v-for="(btn,index) in btns" :key="index" name="hello" appear>
<div class="divwidth" v-show="isShow" :style="[{transition :btn.transition},{transitionDelay:100+'ms'}]">
<span class="content">{{btn.text}}</span>
</div>
</transition>
</div>
<script type="module">
import Vue from "https://cdn.jsdelivr.net/npm/vue#2.7.14/dist/vue.esm.browser.js"
console.log(Vue)
const vue = new Vue({
el: "#root",
data() {
return {
isShow: true,
isShow2: true,
btns: [
{ text: "英语第1次考试", transition: "500ms" },
{ text: "英语第2次考试", transition: "500ms" }
],
}
},
})
</script>
</body>
<style>
.divwidth {
width: 60%;
margin-top: 15px;
}
.content {
/*background-image: linear-gradient(red, yellow, blue);用于创建一个线性渐变的" 图像 "*/
background-color: orange;
width: auto;
/*margin: 20px;*/
/*margin-top: 0px;*/
/*padding-top: 10px;*/
padding: 6px;
font-size: 20px;
border: 10px;
border-radius: 8px;
/*line-height: 30px;*/
}
/*.hello-enter-active, .hello-leave-active {*/
/* transition: 300ms linear;*/
/* !*transition-delay:200ms*!*/
/*}*/
.hello-enter,
.hello-leave-to {
opacity: 0;
transform: translateX(50%);
}
/*.hello-move { transition: all 0.6s ease; }*/
/*.hello-leave-active{*/
/* position: absolute; */
/*}*/
</style>
</html>

Related

Static cards won't flip when "flip" function called

I have been trying for hours to get my playing cards to flip when the player clicks on them. When the eventListener is fired it should run the flip function which toggles between the front/backsides of a card. What am I doing wrong?
const playingCards = document.querySelectorAll('.playing-cards');
function flipCard(){;
this.classList.toggle("flip")
}
playingCards.forEach((card) => card.addEventListener("click", flipCard));
.playing-cards{
display: inline-block;
padding: 20px;
position: relative;
cursor: pointer;
}
.playing-cards .flip{
transform: rotateY(180deg);
}
.front-card{
background-color: aqua;
width: 300px;
height: 300px;
transform: rotateX(0deg);
}
.back-card{
background-color: greenyellow;
width: 300px;
height: 300px;
transform: rotateY(180deg);
}
.front-card,
.back-card{
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<div class="memory-game">
<div class="playing-cards">
<div class="front-card">A</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">B</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">a</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">b</div>
<div class="back-card"></div>
</div>
</div>
<body>
<script src=index.js></script>
</body>
</html>

Answer derived from here
const playingCards = document.querySelectorAll('.playing-cards');
function flipCard() {
this.classList.toggle("flip")
}
playingCards.forEach((card) => card.addEventListener("click", flipCard));
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.memory-game {
background-color: transparent;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.playing-cards {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
cursor: pointer;/*clickable-cursor*/
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.playing-cards.flip {
transform: rotateY(180deg);
}
/* Position the front and back side */
.front-card, .back-card {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.front-card {
background-color: aqua;
color: black;
}
/* Style the back side */
.back-card {
background-color: greenyellow;
color: white;
transform: rotateY(180deg);
}
<div class="memory-game">
<div class="playing-cards">
<div class="front-card">A</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">B</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">a</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">b</div>
<div class="back-card"></div>
</div>
</div>
Edit: Added cursor effect

Using jquery connections but it isn't connecting div's together?

I am trying to create this page where I have different div and buttons that are scattered on the page and connecting them using jquery connections by musclesoft
I have tried this code but it seems that the connection isn't happening at all, I can't figure out what the issue is?
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- Include jQuery and the Connections plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.connections.js"></script>
<!-- Connect your elements like in this example -->
<script>
jQuery(document).ready(function() {
$('div').connections();
});
</script>
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by rasbsal</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<button>
Text
</button>
</div>
<div>
<button class="about">
About
</button>
</div>
</body>
</html>

The connections are not visible because there's actually no space between the div elements (go to Inspect Element in Dev Tools and see for yourself highlighting the two DIV elements).
Use button as your connecting selector
jQuery(($) => {
$('button').connections();
});
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<div>
<button>Text</button>
</div>
<div>
<button class="about">About</button>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/musclesoft/jquery-connections#1.0.1/jquery.connections.js"></script>

Max-height Transitions happening in the wrong order

LTLFTP here.
I finally have a problem seemingly only you can solve. I'm trying to create an accordion style menu and I would like a transition effect. The problem is, whenever I change the max-height property, the transitions happen in the wrong order, the transition durations are not the same, and a mysterious delay shows up.
Any insight into this little problem would be wonderful. Thanks in advance. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css\default.css">
<style>
.content {
margin-top: 50px;
width: 1024px;
margin-left: auto;
margin-right: auto;
background-color: #fefefe;
border: 1px solid #888;
padding: 1em;
}
.title {
text-align: center;
}
.dresser {
border: 1px solid #888;
padding: auto 1em;
}
.dresser h2 {
margin: 0px;
padding: 2px;
background-color: #888;
color: #fefefe;
cursor: pointer;
}
.drawer {
padding: 0em 1em;
overflow-y: hidden;
max-height: 0px;
transition-property: max-height;
transition-duration: 2s;
}
</style>
</head>
<body onload="enableDresser();">
<div class="content">
<div class="title">
<h1>Dashboard</h1>
</div>
<div class="dresser">
<h2 class="drawerLabel"> <span>▸</span> Contact</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Links</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<h2 class="drawerLabel"> <span>▸</span> Documents</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>
<!-- <h2 class="drawerLabel"> <span>▸</span> Guides</h2>
<div class="drawer">
<h1>Stuff</h1>
</div>-->
</div>
</div>
<script type="text/javascript">
var drawerLabels = document.getElementsByClassName("drawerLabel");
//console.log(drawerLabels);
function enableDresser() {
for (var i = 0; i < drawerLabels.length; i++) {
drawerLabels[i].onclick = function() {
openDrawer(this);
}
}
openDrawer(drawerLabels[1]);
}
function closeDresser() {
for (i=0; i<drawerLabels.length; i++) {
drawerLabels[i].firstElementChild.innerHTML = "▸";
drawerLabels[i].nextElementSibling.style.maxHeight = "0px";
}
}
function openDrawer(labelElement) {
closeDresser();
labelElement.firstElementChild.innerHTML = "▾";
labelElement.nextElementSibling.style.maxHeight = "1000px";
}
</script>
</body>
</html>

Slick - Code execution

I use the slick framework that allows me to have a carousel.
The problem is that on the second page of my carousel there is a css effect that starts. (code below)
The problem is that the css effect starts when the site is opened. So when I scroll the
caroussel the effect is already "past". I want the effect to start after clicking on one of the two
arrows (right and left).
I import the slick framework through url and saw that the button code is on
one of the url so I modify myself the button in my code (javascript).
After doing that nothing happens.
I do not understand !
Looking forward to an answer from you for my two problems.
Cordially.
/*(function() {
var slideContainer = $('.slide-container');
slideContainer.slick({
//id added to execute the function below
//https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js
//In this url you can see that prevArrow and nextArrow are the buttons
prevArrow: '<button id="prev" type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
nextArrow: '<button id="nex" type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
});
$("#prev, #nex").click(function() {
$(".expand").addClass("myeffect2");
});
*/
$(".slide-container").slick({
});
body {
background-color: black;
color: #9E9E9E;
}
.slide-container {
margin: auto;
width: 600px;
text-align: center;
}
.wrapper {
padding-top: 100px;
padding-bottom: 40px;
}
.wrapper:focus {
outline: 0;
}
.card {
background: white;
width: 300px;
display: inline-block;
margin: auto;
border-radius: 19px;
position: relative;
text-align: center;
-webkit-box-shadow: -1px 15px 30px -12px black;
box-shadow: -1px 15px 30px -12px black;
}
/***** Effect *****/
.expand-bg {
background: none repeat scroll 0 0 #e6e6e6;
border-radius:16px;
height: 16px;
margin-bottom: 5px;
}
.expand {
border-radius: 13px;
height: 12px;
margin: 2px;
position: absolute;
}
.myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}
#-moz-keyframes myeffect2 {
0% {
width:0px;
}
100% {
width:90%;
}
}
#-webkit-keyframes myeffect {
0% {
width:0px;
}
100% {
width:90%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="slide-container">
<!--page1-->
<div class="wrapper">
<div class="card profile">
<div class="card__level card__level--profile">
<p>My name</p>
</div>
</div>
</div>
<!--end page1-->
<!--page2-->
<div class="wrapper">
<div class="card skills">
<div class="card__unit-name"</div>
</br>
<h3>My effect</h3>
<div class="expand-bg"> <div class="expand myeffect2"> </div> </div>
</div>
</div>
<!--end page2-->
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Scope the myeffect2 class or any class with an animation that you don't want to run unless the slide is active to the slick-active class.
Slick adds the "slick-active" class to slides that are in view.
.slick-active .myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}

Change nav text and logo color when scrolling

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();

Develop Reference

JavaScript is the programming language of the Web.

transition-group with v-show not working in vue2 - javascript

Related

Static cards won't flip when "flip" function called

Using jquery connections but it isn't connecting div's together?

Max-height Transitions happening in the wrong order

Slick - Code execution

Change nav text and logo color when scrolling

Categories

Resources