I'm pretty new to css animations but I've got my page looking how I want except for this one glitch. I have a scrolling animation using scrollspy.js and when it hits a certain div images slideinleft or slideinright into the page.
Link here
However when you hit control + mwheel down it doesn't start the anims from outside of the browser window like i would prefer it to. I'm using 1920x1080 res, for reference.
Basically, on page load it looks fine:
But again, when employing the ctrl + mwheel down it becomes this ugly looking page:
I need it to scale.
Any css gurus know what I'm doing wrong?
HTML:
<div class="flex-row panel-row-style panel-row-style-for-4-1 page left-phone has-bg feed active" style="margin-top: 100px; animation-name: slideInLeft;">
<div id="pgc-4-1-0" class="panel-grid-cell panel-grid-cell-empty"></div><div id="pgc-4-1-1" class="panel-grid-cell">
<div id="panel-4-1-1-0" class="so-panel widget widget_sow-image panel-first-child panel-last-child" data-index="2">
<div class="top-img panel-widget-style panel-widget-style-for-4-1-1-0">
<div class="so-widget-sow-image so-widget-sow-image-default-eef982a7180b">
<div class="sow-image-container phone">
<img src="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png" width="400" height="831" srcset="http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2.png 400w, http://streamlistapp.com/wp-content/uploads/2017/06/phone-blank2-144x300.png 144w" sizes="(max-width: 400px) 100vw, 400px" class="so-widget-image">
<img class="screen-left layer" src="http://streamlistapp.com/wp-content/uploads/2017/07/purse-inside-screen.png">
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-2" class="panel-grid-cell panel-grid-cell-mobile-last animated" style="visibility: visible; animation-name: undefined;">
<div id="panel-4-1-2-0" class="so-panel widget widget_siteorigin-panels-builder panel-first-child panel-last-child" data-index="3">
<div id="pl-w5973cd6d9c123" class="panel-layout">
<div id="pg-w5973cd6d9c123-0" class="panel-grid panel-no-style">
<div id="pgc-w5973cd6d9c123-0-0" class="panel-grid-cell">
<div id="panel-w5973cd6d9c123-0-0-0" class="so-panel widget widget_sow-editor panel-first-child panel-last-child" data-index="0">
<div class="link-s front panel-widget-style panel-widget-style-for-w5973cd6d9c123-0-0-0">
<div class="so-widget-sow-editor so-widget-sow-editor-base">
<div class="siteorigin-widget-tinymce textwidget">
<h4>
STREAMING<br>
MARKETPLACE
</h4>
<h3>Streamlist</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div id="pgc-4-1-3" class="panel-grid-cell panel-grid-cell-empty"></div>
CSS:
.can-transform3d .active.has-bg:before,
.can-transform3d .active.has-bg:after,
.can-transform3d .past-active.has-bg:before,
.can-transform3d .past-active.has-bg:after {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
/*transform: translate3d(328px, 0, 0);*/
transform: translate3d(0px, 0, 0);
}
.has-bg {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.has-bg:before,
.has-bg:after {
content: '';
position:absolute;
display: block;
opacity: 0;
-webkit-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-moz-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-o-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-ms-transition: all 750ms cubic-bezier(0,0.5,0.25,1);
transition: all 750ms cubic-bezier(0,0.5,0.25,1);
-webkit-transition-delay: .25s; /* Safari */
transition-delay: .25s;
z-index: 1;
visibility: visible;
background-repeat: no-repeat;
background-attachment: scroll;
clear: both;
/*width: 100%;*/
}
.past-active:before,
.past-active:after,
.active:before,
.active:after {
opacity: 1 !important;
}
.page {
height: auto;
width: 100%;
position: relative;
text-align: center;
/*padding-top: 60px;*/
z-index: 1;
}
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:before,
.can-transform3d .left-phone:after,
.can-transform3d .left-phone:after {
-webkit-transform: translate3d(150px , 0, 0);
-moz-transform: translate3d(150px , 0, 0);
-o-transform: translate3d(150px , 0, 0);
-ms-transform: translate3d(150px , 0, 0);
/*transform: translate3d(682px , 0, 0);*/
transform: translate3d(150px , 0, 0);
}
.left-phone:before,
.left-phone:after {
margin-left: 0;
/*right: 0;*/
}
.active .phone .screen-left, .active .phone .screen-right,
.past-active .phone .screen-left, .past-active .phone .screen-right {
opacity: 1;
}
.phone .screen-left, .phone .screen-right {
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.phone .screen-left {
position: absolute;
top: 12.06656%;
left: 22.37791%;
/*width: 75.460123%;*/
}
.layer {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.feed:before, .discover:before {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/watch3-transparent-bg-e1500713498530.png);
/*top: -150px;*/
height: 564px;
width: 330px;
/*right: -425px;*/
right: -425px;
/*background-position: right center;*/
}
.feed:after, .discover:after {
background-image: url(http://streamlistapp.com/wp-content/uploads/2017/07/bracelet-e1500713698821.jpeg);
height: 260px;
width: 260px;
bottom: 0;
/*right: 15%;*/
right: -6%;
/*background-position: 70% center;*/
}
Scroll spy functions:
//First phone (left)
$('#pgc-4-1-2').on('scrollSpy:exit',function(){
$('.panel-row-style-for-4-1').removeClass('past-active').removeClass('active');
wow.addBox(this);
}).scrollSpy();
$('#pgc-4-1-2').on('scrollSpy:enter',function(){
$(this).removeClass('animated');
$('.panel-row-style-for-4-1')
.removeClass('past-active')
.addClass('active')
.removeClass('animated')
.css({
'animation-name' : 'slideInLeft'
})
wow.addBox(this);
}).scrollSpy();
Related
In my website, I want to create a CSS animation where I am trying to flip multiple images one after another after 1sec delay, but it's not working. When the first images flips then second image should flip then thrid and so on
Like this but onload, Each image should flip one after another.
Suppose there are 4 Images 1st image flips with delay:0 then second image flips with delay:1 an so on till fourth Image with delay:4
javascript
document.addEventListener("DOMContentLoaded", function() {
var rotateComplete = function() {
with(target.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "";
}
target.appendChild(arr[0]);
setTimeout(function(el) {
with(el.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "rotator2";
}
}, 0, target);
};
var target = document.getElementById("rotator2");
var arr = target.getElementsByTagName("a");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
target.addEventListener("animationend", rotateComplete, false);
target.addEventListener("MSAnimationEnd", rotateComplete, false);
}, false);
#stage2 {
margin: 2em auto 1em 50%;
height: 240px;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 0 50%;
-moz-perspective: 1200px;
-moz-perspective-origin: 0 50%;
-ms-perspective: 1200px;
-ms-perspective-origin: 0 50%;
}
#rotator2 a {
position: absolute;
left: -151px;
-moz-transform-style: preserve-3d;
}
#rotator2 a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
#rotator2 a:nth-child(1) img {
-webkit-transform: rotateY(-120deg) translateZ(80px);
-moz-transform: rotateY(-120deg) translateZ(80px);
-ms-transform: rotateY(-120deg) translateZ(80px);
}
#rotator2 a:nth-child(2) img {
-webkit-transform: translateZ(80px);
-moz-transform: translateZ(80px);
-ms-transform: translateZ(80px);
}
#rotator2 a:nth-child(3) img {
-webkit-transform: rotateY(120deg) translateZ(80px);
-moz-transform: rotateY(120deg) translateZ(80px);
-ms-transform: rotateY(120deg) translateZ(80px);
}
#rotator2 a:nth-child(n+4) {
display: none;
}
#-webkit-keyframes rotator2 {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-120deg);
}
}
#-moz-keyframes rotator2 {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-120deg);
}
}
#-ms-keyframes rotator2 {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(-120deg);
}
}
#rotator2 {
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-webkit-animation-duration: 2s;
-webkit-animation-delay: 1s;
-moz-transform-origin: 0 0;
-moz-transform-style: preserve-3d;
-moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-moz-animation-duration: 2s;
-moz-animation-delay: 1s;
-ms-transform-origin: 0 0;
-ms-transform-style: preserve-3d;
-ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-ms-animation-duration: 2s;
-ms-animation-delay: 1s;
}
#rotator2:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
}
<div id="stage2">
<div id="rotator2" style="-webkit-animation-name: rotator2; -moz-animation-name: rotator2; -ms-animation-name: rotator2;">
<img src="img/1.jpg" width="280" alt ="1">
<img src="img/2.jpg" width="280" alt ="2">
<img src="img/3.jpg" width="280" alt ="3">
<img src="img/4.jpg" width="280" alt ="4">
<img src="img/5.jpg" width="280" alt ="5">
<img src="img/6.jpg" width="280" alt ="6">
<img src="img/7.jpg" width="280" alt ="7">
<img src="img/8.jpg" width="280" alt ="8">
</div>
</div>
Here the 1st image is continuously fliping
If I understand you correctly, as I said, you can use animation-delay. The value will be
(card index) * animation-duration.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
display: inline-block;
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
.flip-card .flip-card-inner {
animation: rotate 3s .3s infinite;
}
.flip-card:nth-child(2) .flip-card-inner {
animation-delay: .6s;
}
.flip-card:nth-child(3) .flip-card-inner {
animation-delay: .9s;
}
.flip-card:nth-child(4) .flip-card-inner {
animation-delay: 1.2s;
}
#keyframes rotate {
0%, 60% {
transform: rotateY(0);
}
10%, 50% {
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="cards">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
</body>
</html>
Update
To run it infinite, the animation should calculated differently because it should take care for the back animation.
The calculation is
0.3s (flip animation) * 5 (4 cards + 1 more for delay between iteration) * 2 (back and forth) = 3s.
So each "tick" is 10%. We want to flip it back just in the middle of the animation so it 50%. More 10% for the back animation tick.
Here is the lifecycle:
|---|---|---|---|---|---|---|---|---|---|
|___|___|___|___|___|___|___|___|___|___|
Front w w w w Back w w w w
.3s .3s .3s .3s .3s .3s .3s .3s .3s .3s
|_______________________________________|
3s
You can simply use that code attached below HTML and CSS trick:
<div class="c-searchblock_loop">
<div class="c-searchblock_loop-content">
<div class="c-searchblock_chevron">
<svg class="c-icon">
<use xlink:href="https://www.subachahai.com/dist/assets/icons/icons-sprite.svg#icon-chevron"></use>
</svg>
</div>
<div class="c-searchblock_image -first">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-1.png" alt="tools-1">
</div>
<div class="c-searchblock_image -back -second">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-2.png" alt="tools-2">
</div>
<div class="c-searchblock_image -third">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-3.png" alt="tools-3">
</div>
<div class="c-searchblock_image -back -fourth">
<img src="https://www.subachahai.com/dist/assets/images/searchblock-4.png" alt="tools-4">
</div>
</div>
</div>
CSS:
.c-searchblock_chevron {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-searchblock_chevron, .c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-searchblock_image.-first {
-webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-first 4s linear infinite;
}
.c-searchblock_image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50% -25px;
transform-origin: 50% 50% -25px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.c-searchblock_chevron, .c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-searchblock_image.-back.-second {
-webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-second 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
-webkit-transform: rotateY(
180deg);
transform: rotateY(
180deg);
}
.c-searchblock_image.-third {
-webkit-animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop 2s cubic-bezier(.19,1,.22,1) infinite,loop-third 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back.-fourth {
-webkit-animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
animation: loop-image-back 2s cubic-bezier(.19,1,.22,1) infinite,loop-fourth 4s cubic-bezier(.19,1,.22,1) infinite;
}
.c-searchblock_image.-back {
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
-webkit-transform: rotateY(
180deg);
transform: rotateY(
180deg);
}
.c-searchblock.is-active .c-searchblock_footer,
.c-searchblock.is-active .c-searchblock_loop {
-webkit-transform: translate(0);
transform: translate(0)
}
.c-searchblock_loop {
position: relative;
display: inline-block;
width: 180px;
height: 180px;
-webkit-perspective: 200px;
perspective: 200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s;
transition: transform .8s cubic-bezier(.76, 0, .24, 1) .08s, -webkit-transform .8s cubic-bezier(.76, 0, .24, 1) .08s
margin: 50px auto;
}
.editMode .c-searchblock_loop {
-webkit-transform: none;
transform: none;
-webkit-transition: none;
transition: none
}
.c-searchblock_loop-content {
width: 100%;
height: 100%;
-webkit-animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite;
animation: loop 2s cubic-bezier(.19, 1, .22, 1) infinite
}
.c-searchblock_chevron,
.c-searchblock_image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.c-searchblock_chevron {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.c-searchblock_chevron svg {
fill: #fff;
width: 120px;
height: 110px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
#-webkit-keyframes loop {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
25% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
75% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
to {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
}
#keyframes loop {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
25% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
75% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
to {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
}
#-webkit-keyframes loop-first {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
75% {
opacity: 0
}
76% {
opacity: 1
}
to {
opacity: 1
}
}
#keyframes loop-first {
0% {
opacity: 1
}
25% {
opacity: 1
}
26% {
opacity: 0
}
75% {
opacity: 0
}
76% {
opacity: 1
}
to {
opacity: 1
}
}
#-webkit-keyframes loop-second {
0% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
to {
opacity: 0
}
}
#keyframes loop-second {
0% {
opacity: 1
}
50% {
opacity: 1
}
51% {
opacity: 0
}
to {
opacity: 0
}
}
#-webkit-keyframes loop-third {
0% {
opacity: 0
}
25% {
opacity: 0
}
26% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
to {
opacity: 0
}
}
#keyframes loop-third {
0% {
opacity: 0
}
25% {
opacity: 0
}
26% {
opacity: 1
}
75% {
opacity: 1
}
76% {
opacity: 0
}
to {
opacity: 0
}
}
#-webkit-keyframes loop-fourth {
0% {
opacity: 0
}
50% {
opacity: 0
}
51% {
opacity: 1
}
to {
opacity: 1
}
}
#keyframes loop-fourth {
0% {
opacity: 0
}
50% {
opacity: 0
}
51% {
opacity: 1
}
to {
opacity: 1
}
}
#-webkit-keyframes loop-image-back {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
50% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
75% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
to {
-webkit-transform: rotateY(540deg);
transform: rotateY(540deg)
}
}
#keyframes loop-image-back {
0% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
50% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
75% {
-webkit-transform: rotateY(1turn);
transform: rotateY(1turn)
}
to {
-webkit-transform: rotateY(540deg);
transform: rotateY(540deg)
}
}
Description/Approach
I'm trying to merge the two pens:
https://codepen.io/ramsaylanier/pen/xcdiq?q=section&limit=all&type=type-pens
and
https://codepen.io/jasonpaul/pen/NxjvjW?q=collapse&order=popularity&depth=everything&show_forks=false
Ideally, I would like to make the four sections appear in a quadrant-like form (two sections in the first row and two sections in the bottom row). Each section should have a collapsable listbox. When the user clicks on the listbox the section shouldn't expand as well. Clicks in the listbox and in the section should be independent.
Regarding the clicks I think I have to tell the toggleClass to ignore clicks on .collapsible. Not sure how.
$('.section').on('click', function(){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").collapsible({accordion: false});
Code
https://codepen.io/szeconku/pen/oqBPvO
I need to figure out how to make clicks in the listbox independent of the clicks in the section and how to add a second row. Any help is appreciated.
Codepen updated : https://codepen.io/anon/pen/oqBrbq
$('.section').on('click', function(e){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").click(function(e){
e.stopPropagation();
});
.section {
background-size: cover;
position: absolute;
height: calc( 50% - 2px);
width: 50vw;
overflow: hidden;
/*#include skew(-10deg, 0deg);*/
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
border-left: 2px solid white;
border-right: 2px solid white;
cursor: pointer;
}
.section::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-color: #3498DB;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.section::after {
content: "";
display: block;
position: absolute;
top: 0;
left: -15%;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
width: 130%;
height: 100%;
opacity: 0.3;
z-index: -1;
-moz-transform: skew(10deg, 0deg);
-ms-transform: skew(10deg, 0deg);
-webkit-transform: skew(10deg, 0deg);
transform: skew(10deg, 0deg);
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
overflow: hidden;
}
.section:hover {
width: 47%;
z-index: 30;
}
.section:hover::after {
background-size: 50%;
}
.section:hover:last-of-type {
left: 53%;
}
.section.expanded {
width: 100% !important;
left: 0px;
height: 100%;
z-index: 100;
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
}
.section.expanded::after {
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
background-size: 50%;
background-position: left;
}
.section.expanded:hover:last-of-type {
left: 0px;
}
.section.expanded:hover::after {
background-size: 50%;
background-position: left;
}
.section-1 {
left: 0;
top: 0;
}
.section-1::before {
background-color: #1DB45D;
}
.section-2 {
left: 50%;
top: 0;
}
.section-2::before {
background-color: #3498DB;
}
.section-3 {
left: 0;
bottom: 0;
}
.section-3::before {
background-color: #9B59B6;
}
.section-4 {
left: 50%;
bottom: 0;
}
.section-4::before {
background-color: #F06D3A;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section class="section-1 section">
<h1>Title 1</h1>
<div class="container">
<ul class="collapsible" data-collapsible="expandable">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Bullet 1</div>
<div class="collapsible-body">
<p>Bullet 1 text</div>
</ul>
</div>
</section>
<section class="section-2 section">
<h1>Title 2</h1>
</section>
<section class="section-3 section">
<h1>Title 3</h1>
</section>
<section class="section-4 section">
<h1>Title 4</h1>
</section>
</div>
I'm working on a design and I would like make a few blocks "slide in" from the sides when they're in-view of the window. I have it working after following some tutorials online, but it will only work if the elements are not in-view and you scroll down the page to see them. What I would like to do is have the elements also "slide" when the page loads initially. I feel this might be too much code to just post here, so I added everything to a fiddle.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(document).ready('scroll');
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
The bit of code that I've been playing with is at the bottom of the jquery bit, but nothing I change seems to effect anything.
//trigger our scroll event on initial load
$(document).ready('scroll');
But I will admit I have very little knowledge of this, and I'm just following tutorials and examples online. On the fiddle, if you scroll down and back up, you'll see the boxes slide into view. What I'm wanting to do is make them slide in on the initial page load and also as you scroll down the page (i'm using the same code on other elements further down the page on the full version).
Thank you to anyone who can help me!
Pass your function as a reference to both the event listener and ready()
$(window).on('scroll resize', check_if_in_view);
$(document).ready(check_if_in_view);
You are almost there... all you need to do is trigger your check_if_in_view function when all the html is ready - that just means passing in the function by name to your last document.ready call. Your snippet works with that one tweak.
For some general advice, I wouldn't try to "fake" a scroll event just to trigger other behaviours - it may get confusing with changes later on. What you really want is to run your custom function right after pageload, and jquery will let you do precisely that.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(document).ready(check_if_in_view);
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
https://api.jquery.com/ready/
Description: Specify a function to execute when the DOM is fully loaded.
You can't just pass in "scroll", as that is not a function. What you can do is call $(window).trigger('scroll') at the end, or do $(document).ready(check_if_in_view), as check_if_in_view is a function.
/*Interactivity to determine when an animated element in in view. In view elements trigger our animation*/
$(document).ready(function() {
//window and animation items
var animation_elements = $.find('.animation-element');
var web_window = $(window);
//check to see if any animation containers are currently in view
function check_if_in_view() {
//get current window information
var window_height = web_window.height();
var window_top_position = web_window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
//iterate through elements to see if its in view
$.each(animation_elements, function() {
//get the elements information
var element = $(this);
var element_height = $(element).outerHeight();
var element_top_position = $(element).offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is visible (its viewable if it exists between the viewable space of the viewport)
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
element.addClass('in-view');
} else {
element.removeClass('in-view');
}
});
}
//on or scroll, detect elements in view
$(window).on('scroll resize', function() {
check_if_in_view()
})
//trigger our scroll event on initial load
$(window).trigger('scroll');
});
.container {
margin-left: auto;
margin-right: auto;
width: 80%;
}
.row {
border-bottom: solid 1px transparent;
margin-bottom: 2em;
}
.row>* {
float: left;
}
.row:after,
.row:before {
content: '';
display: block;
clear: both;
height: 0;
}
.row.uniform>*> :first-child {
margin-top: 0;
}
.row.uniform>*> :last-child {
margin-bottom: 0;
}
.wrapper {
padding: 1em 0em 4em;
}
.profiles {
margin-bottom: 4em;
padding-top: 4em;
background-color: #fff;
height: 200px;
}
.profile {
width: 24%;
height: 100px;
margin-bottom: 2em;
margin-right: 2px;
text-align: center;
background-color: #666;
border: 1px solid #000;
color: black;
}
.animation-element {
opacity: 0;
position: relative;
}
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-150px, 0px, 0px);
-webkit-transform: translate3d(-150px, 0px, 0px);
-o-transform: translate(-150px, 0px);
-ms-transform: translate(-150px, 0px);
transform: translate3d(-150px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
/*animation element sliding right*/
.animation-element.slide-right {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(150px, 0px, 0px);
-webkit-transform: translate3d(150px, 0px, 0px);
-o-transform: translate(150px, 0px);
-ms-transform: translate(150px, 0px);
transform: translate3d(150px, 0px, 0px);
}
.animation-element.slide-right.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="wrapper">
<div class="container">
<section class="profiles">
<div class="row">
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-left">
</section>
<section class="profile animation-element slide-right">
</section>
<section class="profile animation-element slide-right">
</section>
</div>
</section>
</div>
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
i want to make a button which have jquery function can trigger the css which will flip the card.
i do not know Trigger , toggle or addClass to use. Help thanks !
I actually want it to automatically flip from num 1 to 10.
With looping , how is it going to achieve ?
html
<div class="panel" id="card2">
<div class="front card">
<img src="0.png">
</div>
<div class="back card">
<img src="2.png">
</div>
</div>
css
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front, .togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back ,.toggleback{
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
You could use jQuery UI's .switchClass() function to remove and add the specified class. Here is an example:
$("#flip").click(function() {
$(".card").each(function(index) {
if ($(this).hasClass("front")) {
$(this).switchClass("front", "back");
return;
}
if ($(this).hasClass("back")) {
$(this).switchClass("back", "front");
return;
}
});
});
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.panel:hover .front,
.togglefront {
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back,
.toggleback {
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<button type="button" id="flip">Flip!</button>
<div class="front card">
<img src="http://i.stack.imgur.com/lSjRc.jpg">
</div>
<div class="back card">
<img src="http://i.stack.imgur.com/j5qcg.jpg">
</div>
Or you just use the .removeClass() and .addClass() functions. Here is an example without jQuery UI:
$("#flip").click(function () {
$(".card").each(function (index) {
if ($(this).hasClass("front")) {
$(this).removeClass("front");
$(this).addClass("back");
return;
}
if ($(this).hasClass("back")) {
$(this).removeClass("back");
$(this).addClass("front");
return;
}
});
});
JQUERY
$('.btn').click(function() {
$('.front').addClass('front-flip');
$('.back').addClass('back-flip');
});
You'll need to create a <button> element, and assign an event handler to that button using the code above. Essentially you'll create two new classes front-flip and back-flip which mimic the same CSS that you're currently assigning on hover to flip the card/image over.
See working example here - should set you on the right path EXAMPLE
Example Fiddle
I'm not sure this is the right way to do that, but it's work and you can improve it :
HTML :
<div class="panel panel_1" id="card2">
<div class="front card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211813364.png">
</div>
<div class="back card">
<img src="http://fr.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211808744.png">
</div>
</div>
<button id='flip_card'>Flip card</button>
CSS :
.panel {
width: 200px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .2s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
}
.back {
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
JS :
//Flip card function
$('#flip_card').click(function(){
var card_id = 'card2';
if($('#'+card_id+' .front').css('z-index')==1)
flip_front(card_id);
else
flip_back(card_id);
});
//Flip back of card
flip_back = function(card_id){
$('#'+card_id+' .front').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .back').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
//Flip front of card
flip_front = function(card_id){
$('#'+card_id+' .back').css({
"z-index": 1, "-webkit-transform": "rotateY(180deg)", "-ms-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)", "transform": "rotateY(180deg)"
});
$('#'+card_id+' .front').css({
"z-index": 2, "-webkit-transform": "rotateY(0deg)", "-ms-transform": "rotateY(0deg)", "-moz-transform": "rotateY(0deg)", "transform": "rotateY(0deg)"
});
}
Hope this helps.
I have a button on my page which opens a right panel by using jquery and modernizr frameworks. Button is placed on the rightmost place of screen. When it is clicked it slides to the left with the panel which it opens. The problem is, it won't slide back to where it was when it is clicked again.
HTML:
<!-- right panel -->
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container">
Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
Panel elements
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
Javascript:
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//clode the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
JsFiddle demo (You can see the CSS on JSFiddle)
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
//use toggleClass
$('.cd-panel').toggleClass('is-visible');
});
});
JSFIDDLE
http://jsfiddle.net/Lecgrfvu/3/
Try this i used toggleClass (View in full screen mode to see the result)
jQuery(document).ready(function ($) {
//open the lateral panel
$('.cd-btn').on('click', function (event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//clode the lateral panel
});
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #424f5c;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: #424f5c;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 90%;
height: 100%;
top: 0;
background: #dbe2e9;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 20%;
}
}
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-btn {
visibility: visible !important;
position: absolute;
top: 400px;
left: -50px;
font-size: 16px;
padding: 10px;
margin: 0 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container"> Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
<ul class="collapsible-list">
<li class="nav-header">Views</li>
<li class="collapsible-list-subnav" ng-repeat="treeObject in treeObjects"><a class="collapsible-list-parent">{{treeObject.name}}</a>
<ul class="collapsible-list secondary">
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Public Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="publicView in treeObject.publicViews" ng-click="viewClick($event, publicView)"><a>{{publicView.title}}</a>
</li>
</ul>
</li>
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Private Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="privateView in treeObject.privateViews" ng-click="viewClick($event, privateView)"><a>{{privateView.title}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
</div>