I'm trying to make a submarine (SVG) seem as if it's floating on top of a
wave (also SVG).
Since the wave is constantly going up and down, I want the submarine to be centered vertically (x), but be moving horizontally on top of the wave.
This is the code for the wave
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
I added a class called 'sub' to get your picture formatted and also to add the animation. Notice I added the 'ease-out' as the animation timing function so that it goes down fast but up slower to keep up with the wave timing. But this is also just a result of tweaking the parameters and the animation 'updown' just right so that its working in the opposite direction to the wave based on how it starts. This is one way to do it, if you want to tweak the height or the ease out just change the seconds on ease-out in the 'sub' class or tweak the pixel count in the updown function. Hope this helps!
// best seen at 1500px or less
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
overflow: hidden;
}
.sub{
position: absolute;
top: 85%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -100px; /* Start height margin */
margin-left: -50px; /* Half the width */
animation: updown 7s cubic-bezier(0.42, 0, 0.58, 1) infinite;
animation-timing-function:ease-in-out;
transform: translate3d(0, 0, 0);
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #015871;
}
.wave {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier(0.36, 0.48, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite,
swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
#keyframes updown {
0%, 100% {
transform: translate3d(0,-40px,0);
}
70% {
transform: translate3d(0,45px,0);
}
}
<img class = "sub" src = "https://image.flaticon.com/icons/svg/447/447773.svg">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
Related
I am having issues with lag when using a combination of two CSS animations. The first one animates text shadow on a text, and the second animation is animating two SVG's in the background. On Firefox it doesn't lag very much, but on Chrome it's really bad. Here is a video of it.
Here is a snippet:
/*NEON TEXT CODE*/
#flicker {
animation: flicker-text 1.5s infinite alternate;
font-size: 36px;
color: white;
}
#keyframes flicker-text {
0%,
18%,
22%,
25%,
53%,
57%,
100% {
text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #B0D9DD, 0 0 80px #B0D9DD, 0 0 90px #B0D9DD, 0 0 100px #B0D9DD, 0 0 150px #B0D9DD;
}
20%,
24%,
55% {
text-shadow: none;
}
}
/*OCEAN AND WAVE CODE*/
#ocean-container-vs-code {
position: fixed;
top: 0;
left: 0;
z-index: -9999;
height: 100%;
width: 100%;
}
.ocean {
height: 5%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #015871;
}
.wave {
background: url(//dd7tel2830j4w.cloudfront.net/f1659025056348x434203136138475760/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
-webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
-webkit-animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#-webkit-keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#-webkit-keyframes swell {
0%,
100% {
transform: translate3d(0, -25px, 0);
}
50% {
transform: translate3d(0, 5px, 0);
}
}
#keyframes swell {
0%,
100% {
transform: translate3d(0, -25px, 0);
}
50% {
transform: translate3d(0, 5px, 0);
}
}
<div id="ocean-container-vs-code" style="background:linear-gradient(90deg, #faf0cd, #fab397)">
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
<p id="flicker">This is some test text</p>
Does anyone have any insight on why combining these two animations causes severe lag? What am I doing wrong here?
Thanks so much!
EDIT: Pay attention to when the text flickers. On the moment the text flickers, the waves lag.
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>
So I'm trying to create a diagonal scroll in CSS3, but I'm having no luck.
The original script is this: https://codepen.io/275845/pen/LoYBjg
<style>
.tech-slideshow {
height: 600px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 15s linear infinite;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
</style>
<div class="tech-slideshow">
<div class="mover-1"></div>
<div class="mover-2"></div>
</div>
Here's what I've tried so far, with no success: https://codepen.io/275845/pen/gJOjXY
<style>
.tech-slideshow {
height: 600px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 2s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 5s linear infinite;
}
#keyframes moveSlideshow {
0% {
transform: translatex(0px) translatey(0px)
}
100% {
transform: translatex(100px) translatey(100px);
}
}
</style>
And here's the result that I'm trying to achieve: https://streamable.com/ltsba
As you can see, I'm trying to make a diagonal slide scrolling in css3, but of course, if anyone could point me out another solution weather it's vanilla javascript, or even jQuery, I'm opened for new suggestions.
You're pretty close, just a few issues.
You don't need 2 "mover", one is enough.
Make it big! And background repeat!
Then you move the size of that background image.
.tech-slideshow > div {
height: 3000px; // BIG
width: 3000px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
bottom: 0;. // position
right: 0;
animation: moveSlideshow 5s linear infinite;
}
#keyframes moveSlideshow {
0% {
transform: translatex(0px) translatey(0px);
}
100% {
transform: translatex(255px) translatey(255px); // move size of image
}
}
I have created a mockup of a "kite flying" page that a client requested, which makes the kite follow the cursor around the screen. I would like to have it rotate so that it looks like the kite is traveling in the direction of the movement.
I would like to do something like:
transform: rotate3d(0, 1, 1, 25deg); //TURN KITE TO THE RIGHT
transform: rotate3d(0, -1, -1, 25deg); //TURN KITE TO THE LEFT
But I don't know enough about JS to set up the function so that if the movement on the X-axis is increasing, it rotates right, and if it is decreasing, it rotates left.
Demo in question: http://stoysnet.com/clients/wingsofthewind/flyme/
Pardon my messy code... I am very new at Javascript and CSS animations.
EXTRA: If anyone has suggestions on how to make the "string" so that it A) moves left and right as currently shown, but also B) tips so that it is pointing toward/connected to the kite, I am open to suggestions.
EDIT: Full code of page shown here (cleaned up a bit), so others can still view it when the mockup is removed:
// SCRIPT FOR CURSOR FOLLOW
$(document).on('mousemove', (event) => {
$('.follower').css({
left: event.clientX,
top: event.clientY/1.5 -100,
});
$('.string').css({
left: event.clientX,
});
});
// END SCRIPT FOR CURSOR FOLLOW
// SCRIPT FOR SWAP IMAGE
function pickKite(kite) {
document.getElementById("flyme").style.backgroundImage = "url(" + kite + ")";
}
// END SCRIPT FOR SWAP IMAGE
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#keyframes windy {
0% {
transform: translateX(-30%) translateY(-30%);
}
25% {
transform: translateX(-50%) translateY(-50%);
}
50% {
transform: translateX(-80%) translateY(-30%);
}
75% {
transform: translateX(-50%) translateY(-10%);
}
100% {
transform: translateX(-30%) translateY(-30%);
}
}
body {
padding:0px;
margin:0px;
}
.container {
width:100%;
height:100vh;
background-image: url(https://i.imgur.com/ak3aIyl.png);
background-size: cover;
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 180s linear infinite;
-ms-animation: animatedBackground 180s linear infinite;
-moz-animation: animatedBackground 180s linear infinite;
-webkit-animation: animatedBackground 180s linear infinite;
cursor:crosshair;
}
.follower {
width: 200px;
height: 200px;
background-image: url(https://i.imgur.com/i4xmPPt.png);
background-position: center center;
background-size: contain;
transition-duration: 1800ms;
transition-timing-function: ease-out;
position: fixed;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
transform-origin:50% 50%;
animation: windy 20s ease-in-out infinite;
-ms-animation: windy 20s ease-in-out infinite;
-moz-animation: windy 20s ease-in-out infinite;
-webkit-animation: windy 20s ease-in-out infinite;
}
.string {
width: 2px;
height: 400px;
background:#FFFFFF;
background-position: center center;
background-size: cover;
transition-duration: 1000ms;
transition-timing-function: ease-out;
position: fixed;
left:50%;
top:100%;
transform: translateX(-50%) translateY(-50%);
transform-origin:100% 50%;
}
.kite-selector {
position: absolute;
bottom:10px;
right:10px;
width:300px;
height:100px;
background-color:rgba(0,0,0,0.31);
}
.kite-selector div {
float:left;
margin-left:15px;
}
label > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
cursor:pointer;
background-color:rgba(255,255,255,0.00);
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
background-color:rgba(255,255,255,0.25);
}
<div class="container">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower" id="flyme"></div>
<div class="string">String Position Marker</div>
<!-- KITE IMAGE SELECTOR -->
<div class="kite-selector">
<h3 style="margin:10px;">Select your kite:</h3>
<form>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/i4xmPPt.png" checked onClick="pickKite(this.value);"><img src="https://i.imgur.com/i4xmPPt.png" style="max-height:50px;" alt="kite1"></label>
</div>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/iXRQF77.png" onClick="pickKite(this.value);"><img src="https://i.imgur.com/iXRQF77.png" style="max-height:50px;" alt="kite2"></label>
</div>
<div>
<label><input type="radio" name="kite" value="https://i.imgur.com/L3IA1hX.png" onClick="pickKite(this.value);"><img src="https://i.imgur.com/L3IA1hX.png" style="max-height:50px;" alt="kite3"></label>
</div>
</form>
</div>
<!-- END KITE IMAGE SELECTOR -->
</div>
I have a pure CSS3 slideshow of 4 videos which work fine. I'm using the following code to navigate through the slideshow however because I'm telling it to go left or right 25% when the animation of the slideshow resumes it thinks that there are slides that need to be displayed based on the number of times you click 'next'.
For example, if i have clicked next through 2 slides then as soon as the slideshow resumes instead of going back to the first slide it shows 2 blank slides.
I'm struggling to find a solution to linking the two so that you can navigate through the slides but also so it knows the current position in the keyframes.
If anyone could point me in the right direction i would be so grateful.
CSS
#carousel {
width: 100%;
overflow: hidden;
}
#-webkit-keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% }
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}
#-moz-keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% }
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}
#keyframes slider {
0%, 20%, 100%{ left: 0 }
25%, 45%{ left: -100% }
50%, 70%{ left: -200% }
75%, 95%{ left: -300% }
}
#carousel .video-list, #descriptionCarousel .description-list {
position: relative;
width: 400%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
-webkit-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
-moz-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
-o-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
-ms-animation: slider 60s cubic-bezier(.93,.11,.32,.94) infinite;
animation-delay: 4.6s;
-webkit-animation-delay: 4.6s;
-moz-animation-delay: 4.6s;
-ms-animation-delay: 4.6s;
-webkit-transition: -webkit-transform 1s cubic-bezier(.93,.11,.32,.94);
transition: -transform 1s cubic-bezier(.93,.11,.32,.94);
}
#carousel .video-list li, #descriptionCarousel .description-list li {
position: relative;
width: 25%;
height: 100%;
overflow: hidden;
display: inline-block;
float: left;
}
JS
$(function () {
var position = 0;
$('#next').on('click', function (e) {
e.preventDefault();
position = (position - 25) % 100;
$('#carousel .video-list').css('-webkit-transform', 'translateX(' + position + '%)');
$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused",
"-webkit-animation-play-state": "paused"});
});
$('#previous').on('click', function (e) {
e.preventDefault();
position = (position + 25) % 100;
position = (position > 0) ? -75 : position;
$('#carousel .video-list, #descriptionCarousel .description-list').css('-webkit-
transform', 'translateX(' + position + '%)');
$(".video-list, #timeline, .description-list").css({"animation-play-state": "paused",
"-webkit-animation-play-state": "paused"});
});
});