I have just finished working on a new website for my festivals business and the scrolling text "ticker tape" is taking an age (Sometimes up to a minute) to load especially on phones. It's just on our camping page though (https://wildfestivals.co.uk/school_holiday_camping.html), all other tickers and videos are working well together. My question is, is it the video that's delaying the start and is there a way I can keep both items on there, but speed the start of the ticker up at all?
I'd hate to lose the function. Does anyone know a way that I can sort this please? As you can see I am a have a go guy, not a pro developer.
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker2-wrap {
position: static;
left: 0;
width: 100%;
overflow: hidden;
height: 2rem;
background: rgba(0, 0, 0, 0.2);
box-sizing: content-box;
}
.ticker2-wrap .ticker2 {
display: inline-block;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 120s;
animation-duration: 120s;
}
.ticker2-wrap .ticker2__item {
display: inline-block;
padding: 0 0rem;
font-size: 1.2rem;
letter-spacing: 2px;
font-family: 'Orbitron', sans-serif;
font-weight: 400;
color: rgba(0, 0, 0, 0);
text-shadow: none;
}
<div class="ticker2">
<div class="ticker2__item">********<strong>School holidays with a difference Camping is just £6 a night for Adults & £3 for Children</strong>********</div>
<div class="ticker2__item">********<strong>With daytime & evening entertainment included in the price everyone can afford to enjoy a camping holiday with us</strong>********</div>
<div class="ticker2__item">********<strong>Have as much space as you need at no extra cost</strong>********</div>
<div class="ticker2__item">********<strong>Caravans Campervans Motorhomes and tents are all welcome here</strong>********</div>
<div class="ticker2__item">********<strong>Pop up campsites at 7 beautiful locations for up to a week at each one</strong>********</div>
<div class="ticker2__item">********<strong>Full toilet facilities including disabled toilets and elsan points on site</strong>********</div>
<div class="ticker2__item">********<strong>Camping zones to suit all campers you can stay up late or you can enjoy peace and quiet it's your choice</strong>********</div>
<div class="ticker2__item">********<strong>Our camping is now available for everyone, no festival booking required</strong>********</div>
<div class="ticker2__item">********<strong>Camp more for less at WF</strong></div>
</div>
</div>
Related
Code is below - I'm trying to get this to loop smoothly from the last headline - currently there is a gap and I can't figure out how to loop the headlines without it :/. The current functionality is good, but the gap at the end of the 4 headlines (NB - eventually there will be many more headlines) is really bugging me. Any help would be awesome
<style>
.box{
width: 80%;
}
* {
box-sizing: border-box;
}
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: relative;
left: 0;
width: 100%;
overflow: hidden;
height: 3rem;
background-color: #000;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 3rem;
line-height: 3rem;
white-space: nowrap;
padding-right: 10%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 25s;
animation-duration: 25s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 2rem;
font-size: 2rem;
color: white;
}
</style>
<div class="rt-container">
<div class="col-rt-12">
<div class="Scriptcontent">
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item"><h2></h2></div>
<div class="ticker__item"><h2>Massi out in FIA Race Director Shake-up</h2></div>
<div class="ticker__item"></div><div class="ticker__item"><h2>Ferrari Unveil Bold Design For 2022 Car.</h2></div>
<div class="ticker__item"></div><div class="ticker__item"><h2>Sprint Races Cut From 6 to 3 Due to Cost Cap Dispute.</h2></div>
<div class="ticker__item"></div><div class="ticker__item"><h2>Szafnauer named Alpine Team Principal as Rossi confirms new structure.</h2></div>
</div>
</div>
</div>
</div>
</div>
I was trying to build a auto sliding bar from right to left with an array of data in Angular. Currrently, the animation wasn't working until user click on it. I tried changedetectorref, setTimeout() and trigger click event manually, but nothing work. Please help me on solving this.
The observation is that the data fetched from backend are received and shown (this.offer has its correct value) but the animation is paused. After several seconds, the shown data disappears by itself. When user click the blank sliding bar, the function of clicking on a data triggers and the animation starts. Please let me know if any further information is required.
HTML Part
<div class="ticker-wrap bg-black">
<div class="ticker py-2.5" id="bar-part-1">
<a class="ticker__item" [id]="'talent-' + o.uniqueCode" [href]="'/talent/' + o.uniqueCode" (click)="openTalentDetailDialog(o.uniqueCode)"
*ngFor="let o of offers">
<div class="flex-col content">
<strong>{{o.uniqueCode}}</strong>
</div>
</a>
</div>
<div class="ticker py-2.5" id="bar-part-2">
<a class="ticker__item" [href]="'/talent/' + o.uniqueCode" (click)="openTalentDetailDialog(o.uniqueCode)"
*ngFor="let o of offers">
<div class="flex-col content">
<strong>{{o.uniqueCode}}</strong>
</div>
</a>
</div>
</div>
CSS Part
$duration: 40s;
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
// position: fixed;
z-index: 100;
// bottom: 0;
width: 100%;
overflow: hidden;
// height: 4rem;
// padding-left: 100%;
box-sizing: content-box;
white-space: nowrap;
min-height: 64px;
.ticker {
// display: inline-block;
display: inline-flex;
// height: 4rem;
// line-height: 4rem;
// white-space: nowrap;
// padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: $duration;
animation-duration: $duration;
&__item {
display: inline-block;
padding: 0 2rem;
// font-size: 2rem;
color: white;
cursor: pointer;
.content {
max-width: 450px;
min-width: 450px;
white-space: pre-wrap;
}
&:hover {
text-decoration: underline;
}
}
}
&:hover {
.ticker {
animation-play-state: paused;
}
}
}
TypeScript part
loadRecentOffers() {
console.log('loadRecentOffer is triggered');
this._businessService.getRecentOffers().subscribe(async o => {
console.log('recent offers: ', o);
await Promise.all(o.map(oo => {
oo.time = moment(new Date(oo.createdAt)).fromNow();
}));
this.offers = o;
// this._matSnackBar.open('offer applied', 'Close');
setTimeout(() => {
this._cdr.markForCheck();
this._cdr.detectChanges();
// this._matSnackBar.open('cdr triggered', 'Close');
}, 100)
})
}
I am implementing a marquee style banner using css keyframes. It's working great in desktop (see here in action), but when I use the same implementation and view the site in mobile browsers the animation delay does not work as expected.
The following occurs on mobile browsers (chrome and safari):
I am using a negative animation delay so as to already be halfway through the marquee scroll but instead the text appears halfway up the screen.
Blocks of empty space appear then the text fills in after a lag.
The animation runs through once then doesn't skips a cycle then continues.
The two divs containing text overlap
I have tried using translate3d vs translateX, different animation durations and animation-delays, adding in webkit, ms, moz prefixes, inspecting on the mobile browser.
Example codepen link
Would appreciate any guidance!
<div class="marquee">
<div class="marqueeScroll">
<span>Countdown to our first city guide</span>
<span>•</span>
<span>
NYC comes out in 10 days 4 hours 30 minutes 2 seconds
</span>
<span>•</span>
<span>Countdown to our first city guide</span>
<span>•</span>
<span>
NYC comes out in 10 days 4 hours 30 minutes 2 seconds
</span>
<span>•</span>
</div>
<div class="marqueeScroll2">
<span>Countdown to our first city guide</span>
<span>•</span>
<span>
NYC comes out in 10 days 4 hours 30 minutes 2 seconds
</span>
<span>•</span>
<span>Countdown to our first city guide</span>
<span>•</span>
<span>
NYC comes out in 10 days 4 hours 30 minutes 2 seconds
</span>
<span>•</span>
</div>
</div>
.marquee {
background-color: black;
color: #fff;
height: 39px;
width: 100vh;
right: 100vh;
overflow: hidden;
-webkit-transform: rotate(270deg) translateY(-100vh);
transform: rotate(270deg) translateY(-100vh);
transform-origin: top right;
display: flex;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.marquee:hover {
cursor: pointer;
}
.marquee span {
padding-right: 18px;
}
.marqueeScroll, .marqueeScroll2 {
height: 20px;
white-space: nowrap;
font-size: 10px;
display: block;
-webkit-animation-duration: 70s;
-moz-animation-duration: 70s;
-o-animation-duration: 70s;
animation-duration: 70s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.marqueeScroll {
-webkit-animation-name: marquee;
-moz-animation-name: marquee;
-o-animation-name: marquee;
animation-name: marquee;
-webkit-animation-delay: -35s;
-moz-animation-delay: -35s;
-o-animation-delay: -35s;
animation-delay: -35s;
}
.marqueeScroll2 {
-webkit-animation-name: marquee2;
-moz-animation-name: marquee2;
-o-animation-name: marquee2;
animation-name: marquee2;
-webkit-animation-delay: -70s;
-moz-animation-delay: -70s;
-o-animation-delay: -70s;
animation-delay: -70s;
}
#-webkit-keyframes marquee {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
}
100% {
-webkit-transform: translate3d(100%, 0, 0);
}
}
#-moz-keyframes marquee {
0% {
-moz-transform: translate3d(-100%, 0, 0);
}
100% {
-moz-transform: translate3d(100%, 0, 0);
}
}
#-o-keyframes marquee {
0% {
-o-transform: translate3d(-100%, 0, 0);
}
100% {
-o-transform: translate3d(100%, 0, 0);
}
}
#keyframes marquee {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
#-webkit-keyframes marquee2 {
0% {
-webkit-transform: translate3d(-200%, 0, 0);
}
100% {
-webkit-transform: translate3d(0%, 0, 0);
}
}
#-moz-keyframes marquee2 {
0% {
-moz-transform: translate3d(-200%, 0, 0);
}
100% {
-moz-transform: translate3d(0%, 0, 0);
}
}
#-o-keyframes marquee2 {
0% {
-o-transform: translate3d(-200%, 0, 0);
}
100% {
-o-transform: translate3d(0%, 0, 0);
}
}
#keyframes marquee2 {
0% {
transform: translate3d(-200%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
I have a 3D cube using CSS that spins on both the X and Y axis. It works great in Chrome and Firefox but does not spin in Safari. I have looked in the Safari console and see no errors or exceptions either.
Codepen example of the cube spinning: https://codepen.io/anon/pen/orGywz
/*Login Cube*/
#cube-wrapper-login {
position: absolute;
left: 46%;
top: 10%;
perspective: 2000px;
}
.cube_login {
position: relative;
transform-style: preserve-3d;
animation-name: rotate;
animation-duration: 3.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes rotate {
0% {
transform: rotate3d(0, 0, 0, 0);
}
100% {
transform: rotate3d(1, 1, 0, 360deg);
/*controls rotation amount on one axis) */
;
}
}
#arrow {
border-right: 2px solid white;
border-bottom: 2px solid white;
width: 10px;
height: 10px;
transform: rotate(-45deg);
margin-top: 40px;
}
ul li {
position: relative;
padding-bottom: 10px;
}
ul {
list-style: none;
}
/* Size and border color for each face */
.face_login {
position: absolute;
width: 150px;
height: 150px;
border: solid black 1.5px;
text-align: center;
vertical-align: middle;
line-height: 150px;
font-size: 25px;
font-weight: bold;
}
/* Transforming every face into their correct positions */
#front_face_login {
transform: translateX(-15px) translateY(-15px) translateZ(75px);
background: rgba(252, 183, 17, 1);
/*Spanish Yellow*/
}
#back_face_login {
transform: translateX(-15px) translateY(-15px) translateZ(-75px);
background: rgba(243, 112, 33, 1);
/*Vivid Tangelo*/
}
#right_face_login {
transform: translateY(-15px) translateX(60px) rotateY(90deg);
background: rgba(204, 0, 76, 1);
/*Spanish Carmine*/
}
#left_face_login {
transform: translateY(-15px) translateX(-90px) rotateY(90deg);
background: rgba(100, 96, 170, 1);
/*Liberty Purple*/
}
#top_face_login {
transform: translateX(-15px) translateY(-90px) rotateX(90deg);
background: rgba(0, 137, 208, 1);
/*Blue Cola*/
}
#bottom_face_login {
transform: translateX(-15px) translateY(60px) rotateX(90deg);
background: rgba(13, 177, 75, 1);
/*Green (Pantone)*/
}
.cube_login {
transform: rotateX(90deg) rotateY(90deg);
}
<div id="cube-wrapper-login">
<div class="cube_login">
<!-- A div for each face of the cube -->
<br><br>
<div id="front_face_login" class="face_login">XQUBE</div>
<div id="right_face_login" class="face_login">XQUBE</div>
<div id="back_face_login" class="face_login">XQUBE</div>
<div id="left_face_login" class="face_login">XQUBE</div>
<div id="top_face_login" class="face_login">XQUBE</div>
<div id="bottom_face_login" class="face_login">XQUBE</div>
</div>
</div>
I am not really an expert on 3D transforms, but it might be as simple as changing this in your CSS. I really do not know much about the arguments for rotate3D, so you might have to change that for the 180deg / 50%. There is actually another post on SO about this issue. You apparently need the intermediate transform fro some reason. See: CSS Animation rotate3d not working in Safari
Also found this reference as an online tool, but probably not needed here really, Autoprefixer CSS online
#keyframes rotate {
0% {
transform: rotate3d(0, 0, 0, 0);
}
50% {
transform: rotate3d(1, 1, 0, 180deg);
}
100% {
transform: rotate3d(1, 1, 0, 360deg);
/*controls rotation amount on one axis) */
;
}
}
Fairly new web developer here. So I have a CSS3 transition on my wordpress site which works fine in every browser but IE and Edge. Not sure exactly what to do about it also since I am not easily able to test it on my mac.
Here are the snippets that may be effecting things. The first is starting them off the page.
.jumbotron #name {
margin-left:-200em;
}
.jumbotron #line {
margin-left:-80em;
}
.jumbotron #occupation1, .jumbotron #occupation2 {
margin-left:-190em;
}
#-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(42%, 0, 0);
transform: translate3d(42%, 0, 0);
}
}
#keyframes slideInLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(42%, 0, 0);
transform: translate3d(42%, 0, 0);
}
}
#-webkit-keyframes slideInLeftLine {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(315%, 0, 0);
transform: translate3d(315%, 0, 0);
}
}
#keyframes slideInLeftLine {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(315%, 0, 0);
transform: translate3d(315%, 0, 0);
}
}
#-webkit-keyframes slideInLeft2 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(43%, 0, 0);
transform: translate3d(43%, 0, 0);
}
}
#keyframes slideInLeft2 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(43%, 0, 0);
transform: translate3d(43%, 0, 0);
}
}
#-webkit-keyframes slideInLeft3 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(45%, 0, 0);
transform: translate3d(45%, 0, 0);
}
}
#keyframes slideInLeft3 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(45%, 0, 0);
transform: translate3d(45%, 0, 0);
}
}
.slideInLeft3 {
-webkit-animation-name: slideInLeft3;
animation-name: slideInLeft3;
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
.slideInLeft2 {
-webkit-animation-name: slideInLeft2;
animation-name: slideInLeft2;
}
.slideInLeftLine {
-webkit-animation-name: slideInLeftLine;
animation-name: slideInLeftLine;
}
#name {
opacity:1;
animation: slideInLeft 2s 1;
-webkit-animation: slideInLeft 2s 1;
-moz-animation: slideInLeft 2s 1;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#line {
opacity:1;
animation: slideInLeftLine 2s 1;
-webkit-animation: slideInLeftLine 2s 1;
-moz-animation: slideInLeftLine 2s 1;
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#occupation2 {
animation: slideInLeft3 2s 1;
-webkit-animation: slideInLeft3 2s 1;
-moz-animation: slideInLeft3 2s 1;
-webkit-animation-delay: 5s; /* Chrome, Safari, Opera */
animation-delay: 5s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#occupation1 {
animation: slideInLeft2 2s 1;
-webkit-animation: slideInLeft2 2s 1;
-moz-animation: slideInLeft2 2s 1;
-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
animation-delay: 3s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
Really just the #line is the one that I am having trouble with. It could possibly be because the margins function differently with edge and ie? I know that the resume's on the site are not displaying center in the page either. I put the site up on a sub directory incase you want to see it.
For starters one major issue is your html. You have extra anonymous closing tags i.e. extra closing div in jumbotron and a random closing p tag in col-md-4 col-md-offset-7. I just removed the col-md-4 divs altogether
I also don't know why you are using margin-left. I personally would scrap using margin left and use absolute positioning on the items inside #jumbotron and make sure #jumbotron is relatively positioned. You will have to mess with the positions to get what you want, but this works in IE.
Html:
<div class="jumbotron">
<div id="name">
<h2>Joseph Scalzo</h2>
</div>
<div id="line"></div>
<h3 id="occupation1">Performer.</h3>
<h3 id="occupation2">Sommelier.</h3>
</div>
<main role="main">
<!-- section -->
<section>
<!-- article formerly with class bigboy -->
<article id="post-2" class="post-2 page type-page status-publish hentry">
<div class="container" id="hide" style="height:0; width:0;">
<figure>
<img src="http://joebiz.net/blog/wp-content/uploads/2015/09/jumbotron.jpg" alt="headshot1"/><br />
</figure>
<div class="col-md-4 col-md-offset-7">
<h2>Joseph Scalzo</h2>
<hr id="fixedLine">
<h3>Performer. Sommelier.</h3>
</div>
</div>
<br class="clear">
</article>
<!-- /article -->
</section>
<!-- /section -->
</main>
Css:
.jumbotron {
position: relative;
}
.jumbotron h2 {
font-size:4em;
font-family: 'Raleway', Tahoma, sans-serif;
color:#f3e877;
}
.jumbotron h3 {
font-family: 'Raleway', Tahoma, sans-serif;
color:black;
}
.jumbotron #name {
position: absolute;
top: 100px;
width: 375px;
}
.jumbotron #line {
border-bottom: 1px solid #fff;
height: 1px;
position: absolute;
top: 172px;
left: -100%;
width: 375px;
}
.jumbotron #occupation1 {
position: absolute;
top: 180px;
left: -100%;
width: 375px;
}
.jumbotron #occupation2 {
position: absolute;
top: 220px;
left: -100%;
width: 375px;
}
#-webkit-keyframes slideInLeft {
from {
left: -100%;
}
to {
left: 60%;
}
}
#keyframes slideInLeft {
from {
left: -100%;
}
to {
left: 60%;
}
}
#-webkit-keyframes slideInLeftLine {
from {
left: -100%;
}
to {
left: 60%;
}
}
#keyframes slideInLeftLine {
from {
left: -100%;
}
to {
left: 60%;
}
}
#-webkit-keyframes slideInLeft2 {
from {
left: -100%;
}
to {
left: 68%;
}
}
#keyframes slideInLeft2 {
from {
left: -100%;
}
to {
left: 68%;
}
}
#-webkit-keyframes slideInLeft3 {
from {
left: -100%;
}
to {
left: 72%;
}
}
#keyframes slideInLeft3 {
from {
left: -100%;
}
to {
left: 72%;
}
}