Here's my code:
HTML
<div class="screen screen1"></div>
<div class="screen screen2"></div>
CSS
.screen{
width: 100%;
height: 50%;
position: absolute;
background-color:#001;
background-image: radial-gradient(white 15%, transparent 16%),
radial-gradient(white 15%, transparent 16%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;
}
.screen2{
left: 100%;
}
JavaScript
$(document).ready(function(){
screen1 = $('.screen1');
screen2 = $('.screen2');
move(screen1, screen2);
});
function move(first, second){
first.animate({left: '-100%'}, 3000, function(){
first.css('left', '100%');
move(second, first);
});
second.animate({left: 0}, 3000);
}
I want to animate two divs to make an infinite background repeating animation using jQuery. I came this far, and it works good for the most part except for the small pause that happens when I send .screen1 to the right.
Here's the fiddle:
https://jsfiddle.net/mavisme/a1275tuv/
How do I fix it to run smoothly?
You should totally drop that and try jQuery CSS animations:
#keyframes animate {
from {
background-position: 0 0;
}
to {
background-position: -60px 0;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
html, body {
height: 100%;
min-height: 100%;
overflow: hidden;
}
.screen {
width: 100%;
height: 100%;
position: absolute;
background-color: #001;
background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%);
background-size: 60px 60px;
animation: animate 300ms linear infinite;
}
<div class="screen"></div>
I assume you are unsatisfied with the "speeding up" and "slowing down" at the beginning and end of each cycle. Have a look at 'easing':
function move(first, second) {
first.animate({
left: '-100%',
}, 3000, 'linear', function() {
first.css('left', '100%');
move(second, first);
});
second.animate({
left: 0
}, 3000, 'linear');
}
easing (default: swing)
A string indicating which easing function to use for the transition.
http://api.jquery.com/animate/
Animating two divs to loop right to left indefinitely
Here's my code:
https://jsfiddle.net/a1275tuv/5/
$(function(){
var x = 0;
setInterval(function(){
x-=1;
$('.screen').css('background-position', x + 'px 0');
}, 10);
})
Related
I'm trying to create a photo dispersion effect with the help of animejs.
Also, I've divided my background image in small blocks by keeping the background position fixed and till now its fine. like this:
But when I include anime js in it, my background doesn't seems to be a single one. Those all block takes same part of the image like this:
Here is the complete code:
let photoContainer = document.querySelector(".photoContainer")
for(let i = 0; i<100; i++){
let ele = document.createElement("div");
ele.classList.add("block");
photoContainer.appendChild(ele);
}
let block = document.querySelectorAll(".block")
let animation = anime.timeline({
targets: block,
easing: "easeInOutExpo",
loop: true,
delay: anime.stagger(20, {start:0}),
})
animation
.add({
delay: 4000,
scale: 0,
translateX: function(){return anime.random(-360,2100);},
translateY: function(){return anime.random(-360,2100);},
rotate: function(){return anime.random(360,-360);},
duration : function(){return anime.random(500,3000);}
})
.add({
scale: 1,
translateX:0,
translateY: 0,
rotate: 0,
duration : function(){return anime.random(2000,3000);}
})
.photoContainer{
position: relative;
display: flex;
flex-wrap: wrap;
transform-style: preserve-3d;
border: 2px solid red;
}
.photoContainer .block{
position: relative;
width: 5vh;
height: 5vh;
transform-style: preserve-3d;
perspective: 1000px;
box-sizing: border-box;
border: 2px solid green;
background-image: url(img.png);
background-color:red ;
background-size: 50vh 50vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top;
}
.dispersionContainer{
width: 50vh;
height: 50vh;
margin: 0px auto;
/* border-radius:50% ; */
background-color: black;
overflow: hidden;
border: 2px solid red;
}
<body>
<section id="spanContainer">
<div class="dispersionContainer">
<div class="photoContainer"></div>
</div>
</section>
</body>
Note: When I pushed this code to github previously, it was fine but when I cloned it again this problem arised.
Thanks in advance.
I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner
I have done this in CSS using transform: skewY( x amount deg);
I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so
var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;
and I can do this via javascript every time the page is resized,
but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.
.homeleftside::after {
transform-origin: top left;
transform: skewY(-29deg);
content: '';
height: 100%;
width: 100%;
background: url("graphics/architecture.jpg");
color: #fff;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
}
.homeleftside {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: top left;
transform: skewY(29deg);
}
As far as I know, your only posibility is with a mask-image.
Support is not fully, but it gives an easy way to achieve it.
Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element
.test {
background-image: linear-gradient(red, green);
-webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}
#test1 {
width: 300px;
height: 200px;
}
#test2 {
width: 200px;
height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You can easily achieve this using clip-path
body {
margin:0;
height:100vh;
background:url(https://picsum.photos/id/10/800/800) center/cover;
}
body:before {
content:"";
display:block;
height:100%;
background:url(https://picsum.photos/id/18/800/800) center/cover;
-webkit-clip-path:polygon(0 0,0 100%,100% 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}
First of all, you can find a simplified demo of my code in this JSFiddle and also below the question. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project.
I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations.
This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters:
nextOrPrev, that runs one animation or another based on the value
provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev" animation, not yet used, just emits an alert("prev").
bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap.
In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu.
This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it?
Thanks for any help.
mainMenuBody();
function mainMenuBody() {
$("body").append(
//BUTTONS
"<div id='playButton' class='mainButton'><div class='buttonText mainButtonText text'>PLAY</div></div>"
);
//WRAP
$("body").wrapInner("<div id='bodyWrap'></div>");
//BINDS
$("#playButton").bind("click", function() {
bodyChange("next", playSettingsBody);
});
}
function bodyChange(nextOrPrev, bodyFunction) {
switch (nextOrPrev) {
case "next":
//ANIMATION AND BODY CHANGE
TweenLite.to($("#bodyWrap"), .4, {
ease: Power2.easeIn,
transform: "rotateY(90deg)",
onComplete: function(){
$("body").empty();
//NEW STUFF
bodyFunction();
TweenLite.from($("#bodyWrap"), .4, {
ease: Power2.easeOut,
transform: "rotateY(90deg)"
});
}
});
//END OF ANIMATION AND BODY CHANGE
break;
case "prev":
alert("prev");
}
}
function playSettingsBody() {
$("body").append(
"<p class='text' id='CYTText'>This is the second menu!</p>"
);
}
body{
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow:hidden;
margin: 0;
}
.text {
color: #FFFFFF;
font-family:Bebas Neue;
-webkit-user-select: none;
cursor: default;
text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
}
.mainButton {
-webkit-transform:scale(1);
width: 200px;
height: 200px;
border: 10px solid #F1F2F0;
text-align:center;
background-color: #F37C2B;
/*background:#5F4A21;*/
display: table;
position: absolute;
margin: auto;
top: 150px;
bottom: 0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
}
.mainButtonText {
position: relative;
display:table-cell;
vertical-align:middle;
-webkit-transform:scale(1);
font-size: 90px;
text-shadow: 4px 4px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
This problem is caused in your .mainButton class. Your code looks a little like this.
.mainButton {
position: absolute;
top: 150px;
bottom: 0;
//rest
}
By removing the line bottom: 0; your JSFiddle now works as expected. However, if you remove the line top: 150px; instead and leave in the bottom: 0 the problem still occurs. Unfortunately, I cannot provide an explanation for this. It might be worth posting a question on the GSAP forums inquiring about why this occurs works when positioning using bottom but not when using top
Edit
Since you need bottom: 0 and I wasn't able to fix your code I wrote an example which works using Timeline, a GSAP plugin. You can see this JSFiddle or the code example below.
var tl = new TimelineMax();
tl.pause();
tl.fromTo($("#click"), 1, {rotationY: 0, ease: Power2.easeOut}, {rotationY: 90, transformOrigin:"right", ease: Power2.easeOut})
.set($("#click2"), {css:{display: "table"}}, "-=0.6")
.fromTo($("#click2"), 1, {rotationY: -90, ease: Power2.easeOut}, {rotationY: 0, transformOrigin:"left", ease: Power2.easeOut}, "-=0.6");
$("#click").click(function() {
tl.play();
});
$("#click2").click(function() {
tl.reverse();
});
* {
margin: 0;
padding: 0;
}
body {
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow: hidden;
}
div.one, div.two {
position: absolute;
bottom: 0;
height: 200px;
width: 200px;
background: #F37C2B;
text-align: center;
display: table;
cursor: pointer;
border: 10px solid #F1F2F0;
}
div.one .text, div.two .text {
position: relative;
display: table-cell;
vertical-align: middle;
color: #FFFFFF;
font-family: Bebas Neue;
font-size: 90px;
}
div.two {
display: none;
border-color: transparent;
background: none;
}
div.two .text {
font-size: 40px;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div id="click" class="one">
<div class="text">
Play
</div>
</div>
<div id="click2" class="two">
<div class="text">
Second Menu
</div>
</div>
Edit: See my answer below.
while waiting for setTimeout to runout, i thought it will be a good idea to add animation.
CSS:
.ws_addButton {border:1px black solid;border-radius:28px;}
.msg[data-status=toPublish] .ws_addButton {background-color:LightCoral;}
.msg[data-status=published] .ws_addButton {background-color:#7892c2; cursor:default;}
#keyframes loas_BG {
from {background: linear-gradient(to right, Initial 0%, transparent 100%);}
to {background: linear-gradient(to right, Initial 0%, transparent 0%);}
}
*I used Initial because i don't know the first color (blue or red)
And the JS that trigger it (need to run only once):
selectMSG.getElementsByClassName('ws_addButton')[0].style.animation = 'loas_BG '+ws_set_delay_basic+'s linear';
But it dosen't work (the animation dosen't start)), and I don't sure why.
tried to find information in google and here, but for now without luck.
<s>any idea how to solve it?</s>
Edit: See my answer below.
after a little more homework i tried this:
var ws_set_delay_basic = 5;
window.getComputedStyle(document.querySelector('#ws_addButton'), ':before').style.animation = 'mymove '+ws_set_delay_basic+'s';
div {
width: 100px;
height: 100px;
background: red;
position: relative;
}
div:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: gray;
opacity: 0.5;
/* animation: mymove 5s; */
}
#keyframes mymove {
from { width: 0; }
to { width: 100%; }
}
<div id="ws_addButton"></div>
As you see, I tried to select a Pseudo-Element, but without success.
Without js, I can add animation directly to it (=Pseudo-Element), but then I do not have a dynamic time.
how can I add animation to Pseudo-Element correctly?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am wondering how can you build a "snake like" effect around the rim of an object using javascript/css.
This effect will create an ever going animation around an object that looks like a tiny white slug moving on the rim of the object (looking like a glow)
(Will Edit this Question once I learn the correct phrasing)
I have a small CSS3 version of this:
A small container and an our snake:
<div id="cont"></div>
<div class="snake"></div>
And here is the CSS Magic:
#cont {
width: 150px;
height: 150px;
background: #000;
margin: 10px;
}
.snake {
width: 5px;
height: 5px;
background: #f00;
position: absolute;
top: 5px;
left: 15px;
animation: around 5s infinite;
}
#keyframes around
{
0% { left: 15px; top: 5px; }
25% { left: 165px; top: 5px; }
50% { top: 160px; left: 165px; }
75% { left: 15px; top: 160px; }
100% { top: 5px; left: 15px; }
}
[Demo]
Probably this might help
The code below moves a dot within the specified borders. Please see : that by adjust the width and height of the same dot you may have a snake like creature Have a look at the Fiddle
<html>
<head>
<style>
#midDiv{
float:left;
width: 100px;
height: 100px;
background:rgb(0,0,0);
}
#topDiv,#bottomDiv{
float:left;
width: 110px;
height:5px;
background: red;
position:relative;
}
#leftDiv, #rightDiv{
width:5px;
float:left;
height: 100px;
background: blue;
position:relative;
}
#bodyWrapper{
width: 120px;
height: 120px;
}
#centerDiv{
float:left;
}
.animateObject{
z-index:2;
background: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#topDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#rightDiv").append(div);
$(div).css({position: "absolute"});
$(div).animate({
top: 100
},
2000, function(){
$("#rightDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#rightDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#bottomDiv").append(div);
$(div).css({position: "absolute", right: 0});
$(div).animate({
right: 100
},
2000, function(){
$("#bottomDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#bottomDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#leftDiv").append(div);
$(div).css({position: "absolute", bottom: -5});
$(div).animate({
bottom: 100
},
2000, function(){
$("#leftDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#leftDiv").on("animcomplete", function(){
$(".animateObject").remove();
var div = document.createElement("div");
$(div).width(5).height(5);
div.className = "animateObject";
$("#topDiv").append(div);
$(div).css({position: "absolute", left: 0});
$(div).animate({
left: 105
},
2000, function(){
$("#topDiv").trigger({type: "animcomplete", time: new Date() });
});
});
$("#topDiv").trigger({type: "animcomplete", time: new Date() });
});
</script>
</head>
<body>
<div id="bodyWrapper">
<div id="topDiv"></div>
<div id="centerDiv">
<div id="leftDiv"></div>
<div id="midDiv"></div>
<div id="rightDiv"></div>
</div>
<div id="bottomDiv"></div>
</div>
</body>
This moves a dot within the specified borders. Please see : that by adjust the width and height of the same dot you may have a snake like creature
Here's an improvement on #Starx answer. I've made the #snake dimension-independent, and gave it a glow effect with box-shadow. Demo
<div id="cont">
<div class="snake"></div>
</div>
#cont {
/* some dimensions */
position: relative;
}
.snake {
position: absolute;
z-index: -1;
width: 0px;
height: 0px;
background: #f00;
border-radius: 5px;
box-shadow: 0px 0px 15px 15px red;
animation: around 4s linear infinite,
glow .7s alternate-reverse ease-in-out infinite;
}
#keyframes around {
0% { left: 0; top: 0; }
25% { left: 100%; top:0; }
50% { left: 100%; top: 100%; }
75% { left: 0; top: 100%; }
100% { left: 0; top: 0; }
}
#keyframes glow {
0% { opacity: .2; }
100% { opacity: 1; }
}
Multiple snakes :-)
Hay after having a quick Google at javascript/css3 animaition.
have a look at this demo
This previous question on stackoverflow deals with a border glow effect.
https://stackoverflow.com/questions/15008931/animated-glowing-border-using-css-js link
you could also uses a javascript animation library such as createjs .
http://www.createjs.com/#!/TweenJS
Create four images, that should exactly be a bit larger than the item, so when you look at it, the item is the foreground on a background that has "snaky" borders.
Create one with a fixed color. And make it "snaky" around the borders. Make sure it's a bit larger than the item itself.
The next image should be a different color, that is lighter, to create a glow effect.
The next image should be the color used in the first image, but exactly in the opposite fashion. All the crests in the first image must be troughs here ( To make it snaky ).
The fourth image again is same as the third, but with a lighter color.
Now, using JQuery, use "animate", and change the background of the item and cycle it between these four images in that order. This creates somewhat a "glow and crawl" effect.
You can extend this beyond four images, add more, to further the effects.