how do i use a checkbox to change an animation play state

how do i use a checkbox to change an animation play state - javascript

How do i use a checkbox to change/toggle an animation play state from play to pause ( do i have to use js), I know it needs a bit more work but i am kind of stuck at this point as I know little to no javascript. ( any help would be greatly appreciated :) ) this is what I have so far:
<body id="body" onLoad="reset(); return true;">
<div id="wrapper">
<div id="cloud">
<div id="cloud1">
<header id="topheader">
<input type="checkbox" id="toggle" name="toggle"/>
<label for="toggle"></label>
</header>
</div>
</div>
</div>
</body>
#cloud{
background-image: url("../image/clouds.png");
background-size: 200% 200%;
background-position: -50% -50%;
-webkit-animation: cloud 120s ease-in-out infinite alternate;
-moz-animation: cloud 120s ease-in-out infinite alternate;
-o-animation: cloud 120s ease-in-out infinite alternate;
animation: cloud 120s ease-in-out infinite alternate;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes cloud {
0%{
background-size: 200% 200%;
background-position: -50% -50%;
}
50%{
background-size: 150% 150%;
background-position: 0% 0%;
}
100%{
background-size: 100% 100%;
background-position: 50% 50%;
}
}
#-moz-keyframes cloud {
0%{
background-size: 200% 200%;
background-position: -50% -50%;
}
50%{
background-size: 150% 150%;
background-position: 0% 0%;
}
100%{
background-size: 100% 100%;
background-position: 50% 50%;
}
}
#keyframes cloud {
0%{
background-size: 200% 200%;
background-position: -50% -50%;
}
50%{
background-size: 150% 150%;
background-position: 0% 0%;
}
100%{
background-size: 100% 100%;
background-position: 50% 50%;
}
}
#-o-keyframes cloud {
0%{
background-size: 200% 200%;
background-position: -50% -50%;
}
50%{
background-size: 150% 150%;
background-position: 0% 0%;
}
100%{
background-size: 100% 100%;
background-position: 50% 50%;
}
}
#cloud1{
background-image: url("../image/clouds1.png");
background-size: 200% 200%;
background-position: 150% 150%;
-webkit-animation: cloud1 150s ease-in-out infinite alternate;
-moz-animation: cloud1 150s ease-in-out infinite alternate;
-o-animation: cloud1 150s ease-in-out infinite alternate;
animation: cloud1 150s ease-in-out infinite alternate;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#-webkit-keyframes cloud1 {
0%{
background-size: 200% 200%;
background-position: 150% 150%;
opacity: .8;
}
50%{
background-size: 150% 150%;
background-position: 0% 0%;
opacity: .5;
}
100%{
background-size: 100% 100%;
background-position: -50% -50%;
opacity: .3;
}
}
#-moz-keyframes cloud1 {
0%{
background-size: 200% 200%;
background-position: 150% 150%;
opacity: .8;
}
50%{
background-size: 150% 150%;
background-position: 0% 0%;
opacity: .5;
}
100%{
background-size: 100% 100%;
background-position: -50% -50%;
opacity: .3;
}
}
#keyframes cloud1 {
0%{
background-size: 200% 200%;
background-position: 150% 150%;
opacity: .8;
}
50%{
background-size: 150% 150%;
background-position: 0% 0%;
opacity: .5;
}
100%{
background-size: 100% 100%;
background-position: -50% -50%;
opacity: .3;
}
}
#-o-keyframes cloud1 {
0%{
background-size: 200% 200%;
background-position: 150% 150%;
opacity: .8;
}
50%{
background-size: 150% 150%;
background-position: 0% 0%;
opacity: .5;
}
100%{
background-size: 100% 100%;
background-position: -50% -50%;
opacity: .3;
}
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label:before{
content: "";
position: relative;
float: right;
margin: 1px;
padding: 2px;
background-image: url("../icons/pauseButton.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
height: 27px;
width: 27px;
border-radius: 2px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
background-color: rgba(110, 0, 250, .5);
}
input[type="checkbox"]:checked + label:before{
content: "";
position: relative;
float: right;
margin: 1px;
padding: 2px;
background-image: url("../icons/playButton.png");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
height: 27px;
width: 27px;
border-radius: 2px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
background-color: rgba(110, 0, 250, .5);
}

You can use animation-play-state, then use jQuery to toggle a class on the element you are animating, where this is set to paused
The animation-play-state CSS property determines whether an animation
is running or paused. You can query this property's value to determine
whether or not the animation is currently running; in addition, you
can set its value to pause and resume playback of an animation.
Resuming a paused animation will start the animation from where it
left off at the time it was paused, rather than starting over from the
beginning of the animation sequence.
E.g, the class could simply be:
.paused{
animation-play-state: paused;
}
The alternative would be to set the CSS property directly.
The simplest way to then alter with Javascript depending on checkbox state would likely to be to leverage jQuery (I appreciate you havent mentioned it) to do, e.g.:
$('#toggle').click(function(e) {
$('#cloud').toggleClass('paused', $('#toggle').is(':checked'));
});

Related

How to keep CSS animation playing while in a hidden DIV

I have a div containing a button that has some continues animation on it, not just on hover, the whole button is just animated. Then I have a "LOAD MORE" button beneath it, using JavaScript it would load the next div which contains exactly the same button (with animation). Problem is since the 2nd div is display:none till the load more button is clicked, the animation starts at the time the load more button is clicked and therefore becomes inconsistent the the animation of the same button above it. I guess the question is, how do I keep my CSS animation playing in the background of the display:none div so that when its loaded the animation starts at the same time and matches the shown button?
here is a direct link to where the issue is happening, please click LOAD MORE and notice the difference that happens in the CSS animation: LINK TO ISSUE (LIVE)
please see the link above // the first 4 buttons are set to be visible, so the CSS animation on them are consistent. When I click LOAD MORE, the 5th button with was in div with display:none is now visible but starts the CSS animation at different time!! how do I have it load at the same time?
$(document).ready(function() {
$(".content").slice(0, 4).show();
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".content:hidden").slice(0, 1).slideDown();
if ($(".content:hidden").length == 0) {
$("#loadMore").text("End of Content").addClass("noContent");
}
});
})
* {
font-family: 'Exo 2', sans-serif;
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-90deg, #F04A30, #F04A30, #303e48, #303e48);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
font-family: 'Exo 2', sans-serif;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.backdrop {
-moz-box-shadow: 0px 6px 5px #111;
-webkit-box-shadow: 0px 6px 5px #111;
box-shadow: 0px 2px 10px #111;
background-color: #131d27 !important;
}
.linktree {
background-color: #131d27 !important;
width: 120px;
height: 120px;
background-image: url("https://www.moenagy.dev/assets/images/moeSplash.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.content {
padding: 10px;
display: none;
}
#loadMore {
width: 200px;
color: #000;
font-weight: bold;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 0px;
border: 1px solid transparent;
background-color: #FFF;
transition: .3s;
}
#loadMore:hover {
color: #000;
background-color: #fff;
border: 1px solid darkslategrey;
text-decoration: none;
}
.loadButton {
padding-bottom: 10px;
}
.noContent {
color: #000 !important;
background-color: transparent !important;
pointer-events: none;
}
/*
* Animated CSS button
*/
.animated-button1 {
background: linear-gradient(-30deg, transparent 50%, transparent 50%);
padding: 20px 40px;
margin: 12px;
display: inline-block;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
overflow: hidden;
color: #FFF;
font-size: 20px;
letter-spacing: 2.5px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
-webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
width: 80%!important;
}
.animated-button1::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #ad8585;
opacity: 0;
-webkit-transition: .2s opacity ease-in-out;
transition: .2s opacity ease-in-out;
}
.animated-button1:hover::before {
opacity: 0.2;
}
a:hover {
color: #000;
text-decoration: none;
}
.animated-button1 span {
position: absolute;
}
.animated-button1 span:nth-child(1) {
top: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateTop linear infinite;
animation: 2s animateTop linear infinite;
visibility: visible;
}
#keyframes animateTop {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.animated-button1 span:nth-child(2) {
top: 0px;
right: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateRight linear -1s infinite;
animation: 2s animateRight linear -1s infinite;
visibility: visible;
}
#keyframes animateRight {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
.animated-button1 span:nth-child(3) {
bottom: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateBottom linear infinite;
animation: 2s animateBottom linear infinite;
visibility: visible;
}
#keyframes animateBottom {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.animated-button1 span:nth-child(4) {
top: 0px;
left: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateLeft linear -1s infinite;
animation: 2s animateLeft linear -1s infinite;
visibility: visible;
}
#keyframes animateLeft {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12">
<div class="text-center" style="padding-top: 30px; padding-bottom: 30px;">
<img class="backdrop linktree">
<h2 style="color: #ffffff; padding-top: 20px;">Custom LinkTree :)</h2>
</div>
</div>
</div>
<div class="container">
<div class="col-xs-12">
<div class="text-center">
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 1
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 2
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 3
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 4
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 5
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 6
</a>
</div>
</div>
</div>
<div class="loadButton">
Load More
</div>
</div>
Above is the JS I'm using, so it basically shows the first 4 and then the rest would load. if I use opacity 0 for .content class it will hide them all !!

I've re-implemented using a class, so now the elements are on the page all the time, but only show on click. I've left as much of the original code as I could.
$(document).ready(function() {
$(".content").slice(0, 4).addClass('show');
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".content:not(.show)").slice(0, 1).addClass('show').slideDown();
if ($(".content.show").length == 0) {
$("#loadMore").text("End of Content").addClass("noContent");
}
});
})
* {
font-family: 'Exo 2', sans-serif;
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-90deg, #F04A30, #F04A30, #303e48, #303e48);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
font-family: 'Exo 2', sans-serif;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.backdrop {
-moz-box-shadow: 0px 6px 5px #111;
-webkit-box-shadow: 0px 6px 5px #111;
box-shadow: 0px 2px 10px #111;
background-color: #131d27 !important;
}
.linktree {
background-color: #131d27 !important;
width: 120px;
height: 120px;
background-image: url("https://www.moenagy.dev/assets/images/moeSplash.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.content {
padding: 10px;
width:0px;
height:0px;
}
.content a {
padding: 0;
}
.show {
width:unset;
height:unset;
}
.content.show a {
padding: 20px 40px;
}
#loadMore {
width: 200px;
color: #000;
font-weight: bold;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 0px;
border: 1px solid transparent;
background-color: #FFF;
transition: .3s;
}
#loadMore:hover {
color: #000;
background-color: #fff;
border: 1px solid darkslategrey;
text-decoration: none;
}
.loadButton {
padding-bottom: 10px;
}
.noContent {
color: #000 !important;
background-color: transparent !important;
pointer-events: none;
}
/*
* Animated CSS button
*/
.animated-button1 {
background: linear-gradient(-30deg, transparent 50%, transparent 50%);
padding: 20px 40px;
margin: 12px;
display: inline-block;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
overflow: hidden;
color: #FFF;
font-size: 20px;
letter-spacing: 2.5px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
-webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
width: 80%!important;
}
.animated-button1::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #ad8585;
opacity: 0;
-webkit-transition: .2s opacity ease-in-out;
transition: .2s opacity ease-in-out;
}
.animated-button1:hover::before {
opacity: 0.2;
}
a:hover {
color: #000;
text-decoration: none;
}
.animated-button1 span {
position: absolute;
}
.animated-button1 span:nth-child(1) {
top: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateTop linear infinite;
animation: 2s animateTop linear infinite;
visibility: visible;
}
#keyframes animateTop {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.animated-button1 span:nth-child(2) {
top: 0px;
right: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateRight linear -1s infinite;
animation: 2s animateRight linear -1s infinite;
visibility: visible;
}
#keyframes animateRight {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
.animated-button1 span:nth-child(3) {
bottom: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateBottom linear infinite;
animation: 2s animateBottom linear infinite;
visibility: visible;
}
#keyframes animateBottom {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.animated-button1 span:nth-child(4) {
top: 0px;
left: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateLeft linear -1s infinite;
animation: 2s animateLeft linear -1s infinite;
visibility: visible;
}
#keyframes animateLeft {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12">
<div class="text-center" style="padding-top: 30px; padding-bottom: 30px;">
<img class="backdrop linktree">
<h2 style="color: #ffffff; padding-top: 20px;">Custom LinkTree :)</h2>
</div>
</div>
</div>
<div class="container">
<div class="col-xs-12">
<div class="text-center">
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 1
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 2
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 3
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 4
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 5
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 6
</a>
</div>
</div>
</div>
<div class="loadButton">
Load More
</div>
</div>

background animation zoom in and out slideshow in css

i am trying to create animated background slideshow that zoom in the first image and then come back to normal for the next image and zoom it, any ideas please ??
.img-contaner {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
animation: img 20s ease-in-out infinite;
background: url(./1.jpg);
}
#keyframes img{
25%{
background: url(./2.jpg);
transform: scale(1.2);
}
50%{
background: url(./3.jpg);
transform: scale(1.2);
}
75%{
background: url(./4.jpg);
transform: scale(1.2);
}
100%{
background: url(./1.jpg);
transform: scale(1.2);
}
}
i tried this but the image stays zoomed the whole animation

Don't override the background-image using the background: shorthand. You'll override the other background-* styles.
Preload all your images into the browser to prevent flickering using a :before pseudo
It's "container" not "contaner"
Math time:
4 images + 4 transitions + 4 pauses = 12. 100 / 12 = 8.3 Calculate incrementally and floor or round your value to be used as animation keyframes steps:
/*QuickReset*/*{margin:0;box-sizing:border-box;}
.img-container {
position: fixed;
width: 100%;
height: 100%;
background: center / cover no-repeat;
animation: img 20s ease-in-out infinite;
}
/* Preload images to prevent flicker during animation */
.img-container:before {
content: "";
background-image:
url(//placehold.it/500x300/0bf?text=1),
url(//placehold.it/500x300/f0b?text=2),
url(//placehold.it/500x300/bf0?text=3),
url(//placehold.it/500x300/0fb?text=4);
}
#keyframes img {
0%, 8% {
background-image: url(//placehold.it/500x300/0bf?text=1);
transform: scale(1);
}
17% {
transform: scale(1.2);
}
25%, 33% {
background-image: url(//placehold.it/500x300/f0b?text=2);
transform: scale(1);
}
41% {
transform: scale(1.2);
}
50%, 58% {
background-image: url(//placehold.it/500x300/bf0?text=3);
transform: scale(1);
}
66% {
transform: scale(1.2);
}
75%, 83% {
background-image: url(//placehold.it/500x300/0fb?text=4);
transform: scale(1);
}
91% {
transform: scale(1.2);
}
}
<div class="img-container"></div>

How to infinite horizontal scroll an image in jQuery?

Im trying to layer 2 images 1 on top of the other and make them scroll infinitely using jQuery. I am able to make the images scroll and layer in CSS but the animation becomes very jerky. How could I create an infinite horizontal scroll on an image using jQuery and keep the animations smooth?
My code so far:
CSS:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 100vw;
height: 100vw;
background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 135s linear infinite;
}
#animate-area2 {
width: 100vw;
height: 100vw;
background-image: url(http://oi67.tinypic.com/2niy905.jpg);
background-repeat: repeat-x;
position: relative;
animation: animatedBackground 80s linear infinite;
}
and HTML:
<div id="animate-area"></div>
<div id="animate-area2"></div>
JSFiddle

Check it out. Maybe you will like it.
https://jsfiddle.net/hnxnjzaq/3/
Basically just used translate instead of background-position.
#keyframes animatedBackground {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
Just adjust the speed as you wish.

Change your
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
to:
#keyframes animatedBackground {
from { background-position: -100% 0; }
to { background-position: 100% 0; }
}
The snippet:
body {
background-color: black;
}
#keyframes animatedBackground {
from { background-position: -100% 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 100vw;
height: 100vw;
background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
position:absolute;z-index:-2;
animation: animatedBackground 135s linear infinite;
}
#animate-area2 {
width: 100vw;
height: 100vw;
background-image: url(http://oi67.tinypic.com/2niy905.jpg);
position:absolute;z-index:-1;
background-repeat: repeat-x;
position: relative;
animation: animatedBackground 80s linear infinite;
}
<div id="animate-area"></div>
<div id="animate-area2"></div>

Is it possible to cut a text shaped hole in a layer? [duplicate]

This question already has answers here:
Transparent text cut out of background
(14 answers)
Closed 7 years ago.
I have an animated background and I would really like the effect of my text to be cut out and show the background.
I have seen example where you can attach a background image and set background color to the same layer and then show the image in the text but not any examples where the layer underneath was revealed. Is it possible?
So in this snippet the white text would be cut out and you could see the gradient changing through the hole.
body {
background: linear-gradient(270deg, #000, #fff);
background-size: 400% 400%;
-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container{
width: 400px;
height: 200px;
background-color: darkred;
margin: auto;
color: #fff;
font-size: 80px;
font-weight: 900;
text-align: center;
}
<div class="container">TO BE CUT OUT</div>
jsfiddle: https://jsfiddle.net/nmhmxkyj/

You can use SVG and apply <mask>
#import url(https://fonts.googleapis.com/css?family=Lato:900);
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: url('http://science-all.com/images/mountain/mountain-03.jpg');
background-size: cover;
background-position: center center;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-45%, -50%);
}
text {
font-size: 80px;
text-anchor: middle;
font-family: 'Lato', sans-serif;
}
<svg width="450px" height="250px">
<mask id="mask" height="100%" width="100%">
<rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
<text>
<tspan x="45%" dy="1.2em">TO BE</tspan>
<tspan x="45%" dy="1.1em">CUT OUT</tspan>
</text>
</mask>
<rect width="100%" height="100%" mask="url(#mask)" fill="#8B0000"></rect>
</svg>

My previous answer was the only way I could find to complete this in pure CSS. However, this is possible using javascript and a canvas. Would this satisfy your question?
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.fillStyle = "darkred";
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.font = "70pt Arial";
ctx.globalCompositeOperation = "xor";
ctx.beginPath();
ctx.fillText("To Be", 60, 80);
ctx.fillText("Cut Out", 35, 180);
ctx.fill();
ctx.restore();
body {
background: linear-gradient(270deg, #000, #fff);
background-size: 400% 400%;
-webkit-animation: AnimationName 5s ease infinite;
-moz-animation: AnimationName 5s ease infinite;
animation: AnimationName 5s ease infinite;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes AnimationName {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<canvas id="canvas" width="400px" height="200px"></canvas>
JSFiddle: https://jsfiddle.net/p98waufL/

Display an image wrapped around a sphere with CSS/Javascript

I am aware that this is possible with three.js but it seems that three.js maxes a mesh sphere and the image gets a bit distorted. I'd also rather just use CSS if possible.
Is this something that can be done with CSS transforms? Ideally I'd like to animate it going from a flat image to a sphere so something that can easily be animated with CSS transitions would be great.

I found a nice example of how to do this with CSS on codepen: http://codepen.io/donovanh/pen/GBIiv. It doesn't actually wrap the image in 3d but it looks nice enough for my purposes.
Here is the relevant html/css:
<section class="stage">
<figure class="ball"><span class="shadow"></span></figure>
</section>
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
-webkit-transform-style: preserve-3d;
background: url('https://alxgroup.net/gto-range-builder/images/treeSS.png') repeat-x;
background-size: auto 100%;
-webkit-animation: move-map 30s infinite linear;
-moz-animation: move-map 30s infinite linear;
-o-animation: move-map 30s infinite linear;
-ms-animation: move-map 30s infinite linear;
animation: move-map 30s infinite linear;
}
.ball:before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
z-index: 2;
}
.ball:after {
content: "";
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-filter: blur(0);
opacity: 0.3;
background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
}
.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
body {
width: 300px;
margin: 20px auto;
background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
background-repeat: no-repeat;
}
.stage {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
#-moz-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#-webkit-keyframes move-map {
0% {
background-position: 0 0; }
100% {
background-position: -849px 0; }
}
#-o-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#-ms-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }

Develop Reference

JavaScript is the programming language of the Web.

how do i use a checkbox to change an animation play state - javascript

Related

How to keep CSS animation playing while in a hidden DIV

background animation zoom in and out slideshow in css

How to infinite horizontal scroll an image in jQuery?

Is it possible to cut a text shaped hole in a layer? [duplicate]

Display an image wrapped around a sphere with CSS/Javascript

Categories

Resources