Need Assistance on Infinite Scrolling Banner on Wordpress - html

I have a question in regards to building an Infinite Scrolling Banner on a website I'm working on.
I made it by putting all my images on one image and having it scroll across the screen above my footer.
2 issues I'm having, the image is overlapping my outside container, I want it to just show up in the designated area for my content. Also my image isn't repeating it will scroll through the whole image and then start over, I was wondering if I can have the image run on repeat and no overlap my container outside it looks bad.
Here is the code I wrote for it, I would really appreciate any help from you guys, and I'd like to thank you in advance for helping me out.
This is the layout for the code.
<div class="photobanner" style="display: inline-block; height: 150px; width: 2500px; overflow: hidden;">
<img class="first" src="https://www.dcnevents.com/wp-content/uploads/2018/01/ScrollingSponsor-1.png" alt="" />
</div>
This is the styling I've done for the code:
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
#-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2150px;
}
}
.photobanner img{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
p .first{
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
display:inline-block;
}

Related

Make Animations Smoother in HTML/CSS

I have a logo of an iceberg, which I am trying to simulate a floating animation with by increasing and decreasing the top margin. I am using the following css for this:
img {
height: 60px;
padding: 5px;
-webkit-animation: logofloat 1s ease-in-out infinite alternate;
-moz-animation: logofloat 1s ease-in-out infinite alternate;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
margin-top: 0px; margin-top: 5px;
}
to {
margin-top: 5px; margin-top: 10px;
}
}
Here is what that currently looks like: https://gyazo.com/bbd8991a3e9a42148bb7677b85d0db3d
The animation is a bit choppy, is there anything that I can do to make it smoother?
Use transform: translateY instead of margin, so the animation will take benefit of the GPU and use will-change: transform so the browser knows in advance what properties are going to change.
img {
height: 100px;
will-change: transform;
animation: logofloat 1s ease-in-out infinite alternate;
}
#keyframes logofloat {
from {
transform: translateY(0);
}
to {
transform: translateY(10px);
}
}
<img src="https://i.stack.imgur.com/UJ3pb.jpg" />
Finally, vendor prefixes are no longer necessary unless you need to support really old browser versions.

CSS steps animation shaking image

I'm trying to do a simple animation but the result isn't smooth.
.animate {
animation: infinity 1.5s steps(27) forwards;
}
#keyframes infinity {
100% {
background-position: -5778px;
}
}
<div class="animate" style="width:214px; height:32px; background-image:url(https://i.hizliresim.com/gOggGZ.png); background-repeat: no-repeat;"></div>
So is there any way to remove that shaking?
We can't see the snippet, please fix it so we can help better.
On a side note, if the animation is not smooth, maybe transition will help. You can't give the number of steps as 'steps(3)', there is a CSS property
animation-iteration-count: 3;
which determines how many times it should be repeated after completing one full loop. You can use 'infinite' too.
Also, you should maybe also define the 0% for better control over the element animation you want.
.animate {
animation: infinity 1.5s linear forwards; /*add transition here */
animation-iteration-count: 3;
}
/* or on the element itself */
.elementclassname {
-moz-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
Changing animation-timing-function to ease-in-out gives smooth animation.
.animate {
animation: infinity 1.5s ease-in-out forwards;
}
#keyframes infinity {
0% {
background-position: 0px;
}
100% {
background-position: -300px;
}
}
<div class="animate" style="width:200px; height:100px; background-image:url(https://preview.ibb.co/k2cREc/banner_about.jpg); background-repeat: no-repeat; -webkit-transform: rotate(-8deg);-moz-transform: rotate(-8deg);-o-transform: rotate(-8deg);-ms-transform: rotate(-8deg); transform: rotate(-8deg);"></div>
You are explicitly asking CSS to make an animation with 3 steps, this is why your animation isn't smooth.
Simply remove the steps(3) part and you'll be good!
.animate {
animation: infinity 1.5s forwards;
width: 100px;
height: 50px;
background: url('https://i.imgur.com/M5XHVHu.jpg');
background-repeat: no-repeat;
transform: rotate(-8deg);
}
#keyframes infinity {
100% {
background-position: -300px;
}
}
<div class="animate"></div>

Rotation changing height of image

I have code which rotates the image 360 degrees infinitely. All things seem fine but the rotation of the image is causing the image to resize i.e., the height of page with increasing and decreasing. I'm not getting why is it happening. The fluctuation of scroll bar shows it.
I've attached a sample snippet which illustrates my problem.
.logo-circle img {
-webkit-animation: spin1 100s infinite linear;
-moz-animation: spin1 100s infinite linear;
-o-animation: spin1 100s infinite linear;
-ms-animation: spin1 100s infinite linear;
animation: spin1 100s infinite linear;
position: absolute;
top: 3%;
left: 27.5%;
overflow: hidden;
}
#keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="logo-circle img-responsive">
<img src = "https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/1024px-Circle_Logo.svg.png" width = "45%"/>
</div>
The image is not resizing, but when it rotates it takes a larger space because of the corners
You can resolve that by adding overflow:hidden to body
body {
margin: 0;
height: 100vh;
}
.logo-circle {
height: 100%;
overflow: hidden;
position: relative;
}
.logo-circle img {
-webkit-animation: spin1 100s infinite linear;
-moz-animation: spin1 100s infinite linear;
-o-animation: spin1 100s infinite linear;
-ms-animation: spin1 100s infinite linear;
animation: spin1 100s infinite linear;
position: absolute;
top: 3%;
left: 27.5%;
max-height: 95%;
width: auto;
}
#keyframes spin1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="logo-circle img-responsive">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/09/Circle_Logo.svg/1024px-Circle_Logo.svg.png" width="45%">
</div>
Maybe it's about img-responsive class from Bootstrap? ... it's use "max-width and height:auto;" So if Your image is not a square, it can be resized.

Continous fadein and fadeout effect in css

I want a fadein and fadeout effect in CSS which should not stop (should be continous).
I created one: http://jsfiddle.net/z5UB5/
Code :
CSS:
body { background: #fff; }
#-webkit-keyframes 'blink' {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
.objblink {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease-in-out;
}
HTML:
<p class="objblink">TEST</p>
But this code is only working in Google Chrome. I want that it should also work in other major browsers.
You can see my modification here jsfiddle, i make your animation definition more short :
-moz-animation: blink 2s ease-in-out infinite normal;
-webkit-animation: blink 2s ease-in-out infinite normal;
animation: blink 2s ease-in-out infinite normal;
Add -moz and #keyframes syntax and removed single quotes from blink.
You can see shorthand syntax of animation at Mozilla Dev Network
If you're open to a jQuery solution, this should do the trick for you:
$(document).ready(function(){
shown = true;
setInterval(function(){
if(shown == true)
$(".objblink").fadeOut();
else
$(".objblink").fadeIn();
shown = !shown;
},500);
});
Here is the JSFiddle
As your latest fiddle, you have declare the animation name with single quote. Remove that one and it will work.
Instead of this
#-moz-keyframes 'blink' {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
Use this
#-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
DEMO
CSS:
.objblink{
-webkit-animation: myfirst 3s;
animation:myfirst 3s;
}
#keyframes myfirst {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
HTML:
<p class="objblink">TEST<meta http-equiv="refresh" content="3" /></p>

Imitating a blink tag with CSS3 animations

I really want to make a piece of text blink the old-school style without using javascript or text-decoration.
No transitions, only *blink*, *blink*, *blink*!
This is different from that question because I ask for blinking without continuous transitions, whereas OP of the other questions asks how to replace blinking with continuous transitions
The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
#keyframes blink-animation {
to {
visibility: hidden;
}
}
#-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
This is <span class="blink">blinking</span> text.
You can find more info about Keyframe Animations here.
Let me show you a little trick.
As Arkanciscan said, you can use CSS3 transitions. But his solution looks different from the original tag.
What you really need to do is this:
#keyframes blink {
50% {
opacity: 0.0;
}
}
.blink {
animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>
JSfiddle Demo
Try this CSS
#keyframes blink {
0% { color: red; }
100% { color: black; }
}
#-webkit-keyframes blink {
0% { color: red; }
100% { color: black; }
}
.blink {
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
This is <span class="blink">blink</span>
​
You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/1/.
There's actually no need for visibility or opacity - you can simply use color, which has the upside of keeping any "blinking" to the text only:
blink {
display: inline;
color: inherit;
animation: blink 1s steps(1) infinite;
-webkit-animation: blink 1s steps(1) infinite;
}
#keyframes blink { 50% { color: transparent; } }
#-webkit-keyframes blink { 50% { color: transparent; } }
Here is some text, <blink>this text will blink</blink>, this will not.
Fiddle: http://jsfiddle.net/2r8JL/
I'm going to hell for this :
=keyframes($name)
#-webkit-keyframes #{$name}
#content
#-moz-keyframes #{$name}
#content
#-ms-keyframes #{$name}
#content
#keyframes #{$name}
#content
+keyframes(blink)
25%
zoom: 1
opacity: 1
65%
opacity: 1
66%
opacity: 0
100%
opacity: 0
body
font-family: sans-serif
font-size: 4em
background: #222
text-align: center
.blink
color: rgba(#fff, 0.9)
+animation(blink 1s 0s reverse infinite)
+transform(translateZ(0))
.table
display: table
height: 5em
width: 100%
vertical-align: middle
.cell
display: table-cell
width: 100%
height: 100%
vertical-align: middle
http://codepen.io/anon/pen/kaGxC (sass with bourbon)
Another variation
.blink {
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
#-webkit-keyframes blink { 50% { visibility: hidden; }}
#keyframes blink { 50% { visibility: hidden; }}
This is <span class="blink">blink</span>
If you want smooth blinking text or something a like you can use following code:
.blinking {
-webkit-animation: 1s blink ease infinite;
-moz-animation: 1s blink ease infinite;
-ms-animation: 1s blink ease infinite;
-o-animation: 1s blink ease infinite;
animation: 1s blink ease infinite;
}
#keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-moz-keyframes blink {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-ms-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-o-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
<span class="blinking">I am smoothly blinking</span>
It's working in my case blinking text at 1s interval.
.blink_me {
color:#e91e63;
font-size:140%;
font-weight:bold;
padding:0 20px 0 0;
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% { opacity: 0.4; }
}
if you want some glow effect use this
#keyframes blink {
50% {
opacity: 0.0;
}
}
#-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}
atom-text-editor::shadow .bracket-matcher .region {
border:none;
background-color: rgba(195,195,255,0.1);
border-bottom: 1px solid rgb(155,155,255);
box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
border-radius: 3px;
animation: blink 2s steps(115, start) infinite;
-webkit-animation: blink 2s steps(115, start) infinite;
}
Please find below solution for your code.
#keyframes blink {
50% {
color: transparent;
}
}
.loader__dot {
animation: 1s blink infinite;
}
.loader__dot:nth-child(2) {
animation-delay: 250ms;
}
.loader__dot:nth-child(3) {
animation-delay: 500ms;
}
Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>