How do I add a transition effect to slowly load my page?

How do I add a transition effect to slowly load my page? - javascript

My page loads directly which is very fast, I basically want to load my page after some transition-duration. Once the transition fades away, the webpage should slowly load/appear.
I've been trying to figure this out for a long time but I don't know how to add a transition effect in Javascript.
<script>
var overlay = document.getElementById("loading");
window.addEventListener('load',function()
{
overlay.style.display = 'none';
})
</script>
follwoing is css file
#import url('https://fonts.googleapis.com/css?family=Montserrat');
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999;
}
.loading-text {
position: absolute;
top: 40%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
width: 100%;
height: auto;
line-height: 100px;
}
.loading-text span {
display: inline-block;
margin: 0 5px;
color: #000;
font-family: 'Montserrat', sans-serif;
font-weight:bold;
}
.loading-text span:nth-child(1) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0s infinite linear alternate;
animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 1s infinite linear alternate;
animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
animation: blur-text 1.5s 1.2s infinite linear alternate;
}
#-webkit-keyframes blur-text {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
#keyframes blur-text {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
following is html
<div id="loading">
<div class="loading-text">
<span class="loading-text-words">L</span>
<span class="loading-text-words">O</span>
<span class="loading-text-words">A</span>
<span class="loading-text-words">D</span>
<span class="loading-text-words">I</span>
<span class="loading-text-words">N</span>
<span class="loading-text-words">G</span>
</div></div>

You can hide the content at the beginning and show the loading stage with something like this:
#loading {
display: block;
}
.content {
display: none;
}
Then you could set the timeout of how much of the time you want to see the loading phase, then fade out the loader and fade in the content.
setTimeout(function(){
$("#loading").fadeOut();
$(".content").fadeIn();
}, 3000);

Related

Reappear bubbles js and css

I'm trying to solve this problem, but I'm giving up and I'm here to see if you can give me some hints.
I made this bubble effect in which when I touch each bubble it pops, but I can't get the bubbles to reappear after a few seconds (as if they were new bubbles).
I leave the code here below:
function changeStyle1() {
var element = document.getElementById("pop1");
element.style.opacity = "0";
}
function changeStyle2() {
var element = document.getElementById("pop2");
element.style.opacity = "0";
}
function changeStyle3() {
var element = document.getElementById("pop3");
element.style.opacity = "0";
}
function changeStyle4() {
var element = document.getElementById("pop4");
element.style.opacity = "0";
}
function changeStyle5() {
var element = document.getElementById("pop5");
element.style.opacity = "0";
}
function changeStyle6() {
var element = document.getElementById("pop6");
element.style.opacity = "0";
}
function changeStyle7() {
var element = document.getElementById("pop7");
element.style.opacity = "0";
}
function changeStyle8() {
var element = document.getElementById("pop8");
element.style.opacity = "0";
}
function changeStyle9() {
var element = document.getElementById("pop9");
element.style.opacity = "0";
}
function changeStyle10() {
var element = document.getElementById("pop10");
element.style.opacity = "0";
}
function changeStyle11() {
var element = document.getElementById("pop11");
element.style.opacity = "0";
}
body {
background: #000;
color: #333;
font: 100% Lato, Arial, Sans Serif;
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* OBJECTS */
button {
background: transparent;
border-color: transparent;
}
.bubble {
position: fixed;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25);
}
.bubble:after {
content: '';
position: absolute;
top: 80px;
left: 80px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
z-index: 10;
filter: blur(2px);
}
.bubble::before {
content: '';
position: absolute;
top: 50px;
left: 45px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
z-index: 10;
filter: blur(2px);
}
.bubble span {
position: absolute;
border-radius: 50%;
}
.bubble span:nth-child(1) {
inset: 10px;
border-left: 15px solid #0fb4ff;
filter: blur(8px);
}
.bubble span:nth-child(2) {
inset: 10px;
border-right: 15px solid #ff4484;
filter: blur(8px);
}
.bubble span:nth-child(3) {
inset: 20px;
border-top: 15px solid #ffeb3b;
filter: blur(8px);
}
.bubble span:nth-child(4) {
inset: 30px;
border-left: 15px solid #ff4484;
filter: blur(12px);
}
.bubble span:nth-child(5) {
inset: 10px;
border-bottom: 10px solid #fff;
filter: blur(8px);
transform: rotate (330deg);
}
/* ANIMATIONS */
.x1 {
-webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: -5%;
top: 5%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x2 {
-webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 5%;
top: 80%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x3 {
-webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 10%;
top: 40%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
.x4 {
-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 20%;
top: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x5 {
-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 30%;
top: 50%;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}
.x6 {
-webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 50%;
top: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
.x7 {
-webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 65%;
top: 70%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x8 {
-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 80%;
top: 10%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x9 {
-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 90%;
top: 50%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x10 {
-webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 80%;
top: 80%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x11 {
-webkit-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 90%;
top: 90%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
/* KEYFRAMES */
#-webkit-keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#-moz-keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#-webkit-keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
#-moz-keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
#keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
<head>
<title>Pure CSS Animated Bubbles</title>
</head>
<body>
<button type="button" onclick="changeStyle()">Click Me</button>
<div id="background-wrap">
<button id="pop1" onclick="changeStyle1()" class="bubble x1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop2" onclick="changeStyle2()" class="bubble x2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop3" onclick="changeStyle3()" class="bubble x3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop4" onclick="changeStyle4()" class="bubble x4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop5" onclick="changeStyle5()" class="bubble x5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop6" onclick="changeStyle6()" class="bubble x6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop7" onclick="changeStyle7()" class="bubble x7">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop8" onclick="changeStyle8()" class="bubble x8">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop9" onclick="changeStyle9()" class="bubble x9">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop10" onclick="changeStyle10()" class="bubble x10">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop11" onclick="changeStyle11()" class="bubble x11">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</body>
Codepen link: https://codepen.io/tomas-saint-romain/details/LYdaMRG

You dont need all of those functions,just one will be enough
JS
const changeStyleToBubble = (id) => {
//we get the id directly from the html element,as parameter
const element = document.getElementById(id);
element.style.opacity = "0";
//set it back to 1 after 2 seconds (2000 ms)
setTimeout(() => {
element.style.opacity = "1";
}, 2000)
}
HTML
<button id="pop2" onclick="changeStyleToBubble(this.id)" class="bubble x2">

Circle looks jagged and not very smooth in Safari

I created a circle that zooms in and fades out once it reaches a certain scale. When I open it on Google chrome, the edges of the circle looks perfect and crisp. But on a Safari, the edge of the circle looks really bad and faded out. I added "webkit" and its still the same. Is it just that the css animation is not compatible with Safari? Here is my code.
Picture of how the edges look in chrome
https://gyazo.com/91a2faecb48703c4ed7e47bc3035b802
Picture of how the edges look in Safari
https://gyazo.com/0507f9bb35eb2e0fd21b620d3ba44538
Html
<ul id="bubbles">
<li id="firstCircle"></li>
</ul>
CSS
#bubbles li{
position: relative;
list-style: none;
display: block;
border-radius: 100%;
animation: fadeAndScale 15s ease-in infinite;
-webkit-animation: fadeAndScale 15s ease-in infinite;
-ms-animation: fadeAndScale 15s ease-in infinite;
-moz-animation: fadeAndScale 15s ease-in infinite;
-o-animation: fadeAndScale 15s ease-in infinite;
}
#bubbles li:nth-child(1){
width: 100px;
height: 100px;
background-color: red;
}
#keyframes fadeAndScale{
0%{
z-index: 100;
transform: scale(0)
}
100%{
z-index: 0;
transform: scale(50);
}
}
#-webkit-keyframes fadeAndScale{
0%{
z-index: 100;
-webkit-transform: scale(0)
}
100%{
z-index: 0;
-webkit-transform: scale(50);
}
}

I would use a round dot svg image and then proceed to use css to animate the scaling.
Edit: This is how that site is approaching it...
.indiez-fow-bg-wrapper {
background: -webkit-linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
background: linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
width: 100%;
height: 100%;
margin: 0 auto;
overflow: hidden;
margin-top: 0;
top: 0;
left: 0;
position: absolute;
}
#media (max-width: 600px) {}
.indiez-fow-bg-wrapper>div {
will-change: transform;
width: 800px;
height: 800px;
position: absolute;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
margin-top: -250px;
margin-left: -250px;
}
.indiez-fow-bg-wrapper>div:not(._touch) {
border-radius: 50%;
}
#media (max-width: 600px) {
.indiez-fow-bg-wrapper>div {
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
}
}
.indiez-fow-bg-wrapper._animate .__violet {
left: 25%;
top: 15%;
}
.indiez-fow-bg-wrapper._animate .__violet._touch {
left: auto;
right: -10%;
top: 5%;
-webkit-animation: scaleUp 16s linear forwards;
animation: scaleUp 16s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__violet:not(._touch) {
background: -webkit-linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
background: linear-gradient(45deg, #411AFA 4%, #9400FF 74%);
-webkit-animation: scaleUp 20s linear forwards;
animation: scaleUp 20s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__red {
top: 25%;
right: 5%;
-webkit-animation: scaleUp 20s 4.5s linear forwards;
animation: scaleUp 20s 4.5s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__red:not(._touch) {
background: -webkit-linear-gradient(45deg, #F14545 0%, #E7219B 100%);
background: linear-gradient(45deg, #F14545 0%, #E7219B 100%);
}
.indiez-fow-bg-wrapper._animate .__red._touch {
right: auto;
left: 25%;
top: 30%;
-webkit-animation: scaleUp 16s 3s linear forwards;
animation: scaleUp 16s 3s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__mint {
top: 200px;
left: 20%;
-webkit-animation: scaleUp 20s 9s linear forwards;
animation: scaleUp 20s 9s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__mint:not(._touch) {
background: -webkit-linear-gradient(45deg, #01C961 0%, #00FFA2 100%);
background: linear-gradient(45deg, #01C961 0%, #00FFA2 100%);
}
.indiez-fow-bg-wrapper._animate .__mint._touch {
-webkit-animation: scaleUp 16s 6s linear forwards;
animation: scaleUp 16s 6s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__sunflower {
bottom: 0px;
right: 100px;
-webkit-animation: scaleUp 20s 13.5s linear forwards;
animation: scaleUp 20s 13.5s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__sunflower:not(._touch) {
background: -webkit-linear-gradient(45deg, #FFB100 0%, #FFE938 100%);
background: linear-gradient(45deg, #FFB100 0%, #FFE938 100%);
}
.indiez-fow-bg-wrapper._animate .__sunflower._touch {
-webkit-animation: scaleUp 16s 9s linear forwards;
animation: scaleUp 16s 9s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__purple {
top: 300px;
left: 10%;
-webkit-animation: scaleUp 20s 18s linear forwards;
animation: scaleUp 20s 18s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__purple:not(._touch) {
background: -webkit-linear-gradient(45deg, #FF519F 0%, #BE42FF 100%);
background: linear-gradient(45deg, #FF519F 0%, #BE42FF 100%);
}
.indiez-fow-bg-wrapper._animate .__purple._touch {
-webkit-animation: scaleUp 16s 12s linear forwards;
animation: scaleUp 16s 12s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__royal-blue {
top: 10%;
right: 10%;
-webkit-animation: scaleUp 20s 22.5s linear forwards;
animation: scaleUp 20s 22.5s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__royal-blue:not(._touch) {
background: -webkit-linear-gradient(45deg, #2500DA 0%, #009BFF 100%);
background: linear-gradient(45deg, #2500DA 0%, #009BFF 100%);
}
.indiez-fow-bg-wrapper._animate .__royal-blue._touch {
-webkit-animation: scaleUp 16s 15s linear forwards;
animation: scaleUp 16s 15s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__orange {
bottom: 0;
left: 100px;
-webkit-animation: scaleUp 20s 27s linear forwards;
animation: scaleUp 20s 27s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__orange:not(._touch) {
background: -webkit-linear-gradient(45deg, #FF4040 0%, #FF9A3D 100%);
background: linear-gradient(45deg, #FF4040 0%, #FF9A3D 100%);
}
.indiez-fow-bg-wrapper._animate .__orange._touch {
-webkit-animation: scaleUp 16s 18s linear forwards;
animation: scaleUp 16s 18s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__lime {
top: 25%;
right: 200px;
-webkit-animation: scaleUp 20s 31.5s linear forwards;
animation: scaleUp 20s 31.5s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__lime:not(._touch) {
background: -webkit-linear-gradient(45deg, #79E200 0%, #B2951B 100%);
background: linear-gradient(45deg, #79E200 0%, #B2951B 100%);
}
.indiez-fow-bg-wrapper._animate .__lime._touch {
-webkit-animation: scaleUp 16s 21s linear forwards;
animation: scaleUp 16s 21s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__aqua {
top: 25%;
left: 15%;
-webkit-animation: scaleUp 20s 36s linear forwards;
animation: scaleUp 20s 36s linear forwards;
}
.indiez-fow-bg-wrapper._animate .__aqua:not(._touch) {
background: -webkit-linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
background: linear-gradient(45deg, #1C96FF 0%, #00FFC9 100%);
}
.indiez-fow-bg-wrapper._animate .__aqua._touch {
-webkit-animation: scaleUp 16s 12s linear forwards;
animation: scaleUp 16s 12s linear forwards;
}
#-webkit-keyframes scaleUp {
60% {
-webkit-transform: scale(5);
transform: scale(5);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#keyframes scaleUp {
60% {
-webkit-transform: scale(5);
transform: scale(5);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
<div class="indiez-fow-bg-wrapper _animate">
<div class="__violet ">
</div>
<div class="__red ">
</div>
<div class="__mint ">
</div>
<div class="__sunflower ">
</div>
<div class="__purple ">
</div>
<div class="__royal-blue ">
</div>
<div class="__orange ">
</div>
<div class="__lime ">
</div>
<div class="__aqua ">
</div>
</div>

Adding text to fading in and fading out images

I want to add text to the images that are fading in and fading out. And I want the text to fade in and out with the concerned image. Any Idea how can this be done? Thanks in advance! I have given the code below:
<html>
<div id="fadeslide">
<img src="9.jpg" class="is-showing"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
</div>
</html>
<script>
function slideShow() {
var showing = $('#fadeslide .is-showing');
var next = showing.next().length ? showing.next():
showing.parent().children(':first');
showing.fadeOut(1000, function() {
next.fadeIn(1000).addClass('is-showing');
}).removeClass('is-showing');
setTimeout(slideShow, 5500);
}
$(document).ready(function() {
slideShow();
});
</script>
#fadeslide {
width: 960px;
height: 640px;
margin: 0px auto 0px auto;
overflow: hidden;
}
#fadeslide img {
display: none;
}
#fadeslide .is-showing {
display: inline;
}

Try this:-
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div id="cf">
<img class="bottom" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />
<img class="top" src="https://wallpapers.pub/web/wallpapers/birds-water-spray-wallpaper/3840x2160.jpg" />
</div>
Ok try it
body, html {
text-align: center;
font-size: 90px;
font-family: Poiret One;
height: 100%;
background: -webkit-linear-gradient(315deg, #723362, #9d223c);
background: linear-gradient(135deg, #723362, #9d223c);
overflow: hidden;
color: white;
}
.letter {
position: relative;
top: -webkit-calc(50% - 60px);
top: calc(50% - 60px);
text-shadow: 0px 0px 3px white;
}
.letter:nth-child(1) {
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.letter:nth-child(2) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.letter:nth-child(3) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.letter:nth-child(4) {
-webkit-animation: fade 4s infinite 800ms;
animation: fade 4s infinite 800ms;
}
.letter:nth-child(5) {
-webkit-animation: fade 4s infinite 1000ms;
animation: fade 4s infinite 1000ms;
}
.letter:nth-child(6) {
-webkit-animation: fade 4s infinite 1200ms;
animation: fade 4s infinite 1200ms;
}
.letter:nth-child(7) {
-webkit-animation: fade 4s infinite 1400ms;
animation: fade 4s infinite 1400ms;
}
#-webkit-keyframes fade {
50% {
opacity: 0.02;
}
}
#keyframes fade {
50% {
opacity: 0.02;
}
}
<span class='letter'>L</span>
<span class='letter'>O</span>
<span class='letter'>A</span>
<span class='letter'>D</span>
<span class='letter'>I</span>
<span class='letter'>N</span>
<span class='letter'>G</span>
or this
.fadebutton {
text-align:center;
padding:20px 20px;
background:#fff;
line-height:60px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s ;
transition: all ease 0.5s ;
border:1px solid #ff3000;
border-radius:5px;
}
.fadebutton:hover {
background-image:url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
color:#fff;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s ;
transition: all ease 0.5s ;
}
<div class="fadebutton">HOVER YOUR MOUSE CURSOR HERE!</div>

Trigger same CSS animation on every click

I'm trying to trigger a CSS animation onclick, but have it restart after each click. I know I can toggle the animation on and off, but I'd like to just trigger the animation every time the button is clicked. Also, initially the CSS animation should not run. Only run when clicked.
Here's my pen.
http://codepen.io/omarel/pen/JRwpZp
HTML :
click me
Jquery :
$('.addtocart').click(function () {
$(this).addClass('on');
});
CSS :
.addtocart {
position: relative;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform: translateY(-100%);
}
10% {
transform: translateY(-100%);
}
15% {
transform: translateY(0);
}
30% {
transform: translateY(-50%);
}
40% {
transform: translateY(0%);
}
100% {
opacity: 1;
}
}

You can listen to when the animation ends, then remove the class 'on'
var animationEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one(animationEvent, function(event) {
$(this).removeClass('on')
});
});
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$(this).removeClass('on')
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me

Instead of using an on click event, use :focus.
.addtocart:focus {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
Now, whenever an element with the .addtocart class is focused (or clicked on), it will have those styles. When you click away, the styles will go away.

You could use the .delay() and .queue()/dequeue() if you want to add/remove class :
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
Hope this helps.
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me

You can add and remove the css class on every click and inorder for you to run the css only while clicking, do this onload not on ready
Example
.addClass and .removeClass

I have a solution to remove your on class every second:
var $post = $(".addtocart");
setInterval(function() {
$post.removeClass("on");
}, 1000);
http://codepen.io/anon/pen/NRZykG

As Jacob said there is no need for javascript.
You can use CSS :focus or :target as in this codepen https://codepen.io/sebilasse/pen/rrOYQj?editors=1100
-
.root {
appearance: none;
position: relative;
width: 120px;
height: 50px;
transition: all .1s linear;
transform: translate3d(0, 0, 0);
}
.animation {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
outline: none;
}
#keyframes pulse {
0% { opacity: 0; box-shadow: 0 0 0 1px red; }
40% { opacity: 0.8; }
80% { box-shadow: 0 0 0 80px red; }
99% { opacity: 0; box-shadow: 0 0 0 0px red; }
}
.root:hover ._focus:focus::after,
.root:target ._target::after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 4px;
box-shadow: 0 0 0 0px red;
border-radius: 50%;
z-index: 1;
left: 20px;
top: 25px;
transform: perspective(1px) translate(-50%, -50%);
animation-name: pulse;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
<h3>crossbrowser animation onClick hacks</h3>
<button class="root">
<div class="animation _focus" tabindex="0" onanimationend="this.blur()">
</div>
contra: steals focus
</button>
<button id="btn_1" class="root">
<a class="animation _target" href="#btn_1"></a>
contra: needs id
</button>

Separate properties for different animations on same object

I am trying to move two wheel images towards each other using the following code:
HTML:
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</body>
CSS:
body{
background:#fff;
}
body > img{
width:200px;
}
.leftwheel {
float:left;
-webkit-animation: rotationLeft 2s infinite linear;
animation: rotationLeft 2s infinite linear;
-moz-animation: rotationLeft 2s infinite linear;
}
#-webkit-keyframes rotationLeft {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);margin-left:25%;}
}
#-moz-keyframes rotationLeft {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);margin-left:25%;}
}
#keyframes rotationLeft {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);margin-left:25%;}
}
.rightwheel {
float:right;
-webkit-animation: rotationRight 2s infinite linear;
animation: rotationRight 2s infinite linear;
-moz-animation: rotationRight 2s infinite linear;
}
#-webkit-keyframes rotationRight {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-359deg);margin-right:25%;}
}
#-moz-keyframes rotationRight {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(-359deg);margin-right:25%;}
}
#keyframes rotationRight {
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);margin-right:25%;}
}
DEMO
Now the problem is, I want both the wheels to move towards each other, meet(collide) at the center and the movement should stop while the rotation still continues. But I have set the animation repeat as infinite since i want infinite rotation of the wheel. Can I achieve what I want just by using CSS? If not what are the javascript alternatives? Also how can I set one animation to repeat and other to happen only once in CSS?

Try wrapping your images in divs, and applying your second animation to the wrapping divs. Include forwards (for animation-fill-mode) in your animation shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) to make the element holds its final position (rather than resetting to its initial position).
Update:
Based on your comment below that the wheels should collide, I would nix the floats and positioning by margin, and would instead position by absolute. Note that (if I understand what you want), the to positions would probably need to be stated by calc(), which is newer technology but mostly supported (http://caniuse.com/#search=calc). Also, your image file includes padding, which you might want to crop in an image editor, or you could reverse in your CSS.
WORKING DEMO (refresh page to repeat animation): http://jsbin.com/jifup/4
CSS:
#-webkit-keyframes translationLeft {
from { left: 0%; }
to { left: calc(50% - 170px); }
}
#-webkit-keyframes translationRight {
from { right: 0%; }
to { right: calc(50% - 170px); }
}
#-webkit-keyframes rotationLeft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
#-webkit-keyframes rotationRight {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
body {
background: #fff;
}
img {
width: 200px;
}
.translateLeft {
-webkit-animation: translationLeft 2s linear forwards;
position: absolute;
margin: -18px;
}
.translateRight {
-webkit-animation: translationRight 2s linear forwards;
position: absolute;
margin: -18px;
}
.leftwheel {
-webkit-animation: rotationLeft 2s infinite linear;
}
.rightwheel {
-webkit-animation: rotationRight 2s infinite linear;
}
HTML:
<body>
<div class="translateLeft">
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
<div class="translateRight">
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
</body>
PREVIOUS ANSWER CODE:
WORKING DEMO (refresh page to see animation again and again): http://jsbin.com/jifup/1
HTML:
<body>
<div class="translateLeft">
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
<div class="translateRight">
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
</body>
CSS:
#-webkit-keyframes translationLeft {
from { margin-left: 0; }
to { margin-left: 25%; }
}
#-webkit-keyframes translationRight {
from { margin-right: 0; }
to { margin-right: 25%; }
}
#-webkit-keyframes rotationLeft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
#-webkit-keyframes rotationRight {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
body {
background: #fff;
}
img {
width: 200px;
}
.translateLeft {
-webkit-animation: translationLeft 2s linear forwards;
}
.translateRight {
-webkit-animation: translationRight 2s linear forwards;
}
.leftwheel {
float: left;
-webkit-animation: rotationLeft 2s infinite linear;
}
.rightwheel {
float:right;
-webkit-animation: rotationRight 2s infinite linear;
}

Develop Reference

JavaScript is the programming language of the Web.

How do I add a transition effect to slowly load my page? - javascript

Related

Reappear bubbles js and css

Circle looks jagged and not very smooth in Safari

Adding text to fading in and fading out images

Trigger same CSS animation on every click

Separate properties for different animations on same object

Categories

Resources