Am I misunderstanding the capabilities of css variables? I am trying to pass a background image url to a variable like this: It seems to be working fine when I pass something simple like a color etc...
:root {
--slide-1: url(/static/images/slideshow/slide1.jpg) ;
--slide-2: url(/static/images/slideshow/slide2.jpg) ;
--slide-3: url(/static/images/slideshow/slide3.jpg) ;
--slide-4: url(/static/images/slideshow/slide4.jpg) ;
--slide-5: url(/static/images/slideshow/slide5.jpg) ;
}
//and then
.jumbotron > .jumbotron-slideshow:nth-child(1) {
background-image: var(--slide-1);
}
.jumbotron > .jumbotron-slideshow:nth-child(2) {
animation-delay: 6s;
background-image: var(--slide-2);
}
.jumbotron > .jumbotron-slideshow:nth-child(3) {
animation-delay: 12s;
background-image: var(--slide-3);
}
.jumbotron > .jumbotron-slideshow:nth-child(4) {
animation-delay: 18s;
background-image: var(--slide-4);
}
.jumbotron > .jumbotron-slideshow:nth-child(5) {
animation-delay: 24s;
background-image: var(--slide-5);
}
This is a bug in Chrome, the code works fine in Firefox.
You'll have to stick with absolute URLs in var() for now.
This was a bug, but it works now. 🎉
-- SCSS version --
In my case we were already using SCSS and needed to do exactly as OP!
SCSS helps to reduce repetitive code, which is easier to look at and great if in the future we need to add or remove slides for example.
You could go a step further and have JS pass you the number of slides as a CSS variable..
..but for this example we'll stick to OP's number of 5 slides and hardcode into SCSS like so:
#for $i from 1 through 5 {
:root { --slide-#{$i}: url(/static/images/slideshow/slide#{$i}.jpg); }
//and then
.jumbotron > .jumbotron-slideshow:nth-child(#{$i}) {
animation-delay: #{($i - 1) * 6}s;
background-image: var(--slide-#{$i});
}
}
Related
i would like to do a reusable sass function that makes it easy for me to write a #keyframes css animation without writing too much code but I'm not sure how to go about it, especially the math part.
i have a div containing a single background image with this css
height: 100vh;
width: 8000px;
this background image is composed of 25 frames. so each frame is 320px wide.
the animation should translateX() the div by multiple of 320px every 4%, so something like this:
#keyframes animation {
0% {
transform:translateX(0);
}
4% {
transform:translateX(-320px);
}
8% {
transform:translateX(-640px);
}
...
}
i would like to make a function of this but I'm new to scss functions and i really don't know where to start. if someone could give me a hint that would be great!
thanks
Could be better (modularise) but here is for you;
#mixin deneme($i){
#for $i from 0 through 100/$i {
#{$i * 4}% {
transform:translateX(#{-320 * $i});
}
}
}
UPDATE:
I think this one is a bit better.
#mixin deneme($increase, $angle){
#for $x from 0 through 100/$increase {
#{$x * $increase }% {
transform:translateX($angle * $x);
}
}
}
So far my animation 'pulses' each odd element and then switches to even elements.
I want to achieve the effect where each element in the sequence pulses separately one by one in order.
Here is what I've got so far:
.pulse-through {
span {
display: inline-block;
#include animation('pulse 0.4s alternate infinite ease-in-out');
&:nth-child(odd) {
animation-delay: 0.4s;
}
}
}
/* KEYFRAME ANIMATIONS */
#include keyframes(pulse) {
to {
#include transform(scale(0.8));
opacity: 0.5;
}
}
My includes are just the regular css transforms and animations but for each browser, to simplify it.
Try something like this:
.pulse-through {
span {
display: inline-block;
#include animation('pulse 0.4s alternate infinite ease-in-out');
#for $i from 1 through 20 {
// limit the amount by some count, or try another way
// if that doesn't work
&:nth-child(#{$i}) {
animation-delay: ($i * 0.2s);
}
}
}
}
I begun to use the LESS library exactly 2 hours ago.
( Time counted AFTER a successfull kind of a Hello World )
My LESS style sheet works.
Here is how I call it in my page:
<!-- LESS CSS -->
<link rel="stylesheet/less" type="text/css" href="myLessCssStyle.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.js"></script>
I made the equivalent of a Hello world on a single CSS value easy to verify:
#testDisplay: none;
#bigVisibleElement{
display: #testDisplay;
}
Success!
Happy about that, since it was almost too easy...
I started to implement this serious variable handling advantage in a small test style sheet I was working on.
And here is where i'm stucked:
/* my LESS vars definition */
#Bes_ease_in_finish: 10%;
#Bes_ease_out_begin: 80%;
#Bes_ease_out_finish: 90%;
/* A couple more lines that includes other working LESS vars... */
/* This is bugging here. On the first LESS var. */
#keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
#Bes_ease_in_finish { opacity: 1; } /* <--- Line 75 is here. */
#Bes_ease_out_begin { opacity: 1; animation-timing-function: ease-out; }
#Bes_ease_out_finish { opacity: 0; }
100% { opacity: 0 }
}
I defined all other prefix variants of #keyframes (-webkit-, -moz-, -o-, -ms-).
That isn't the problem.
Here is the error I get in console:
«Unrecognised input».
Arrrg... What ?!?
Can't use a LESS vars on these animation timing ?
Why?
Or HOW?
Is there a syntax trick ?
These timing values repeat 5 times FOR EACH animation because of these sickening prefixes... And this is a really simple #keyframes animation (fade in / fade out timing of a couple images) that I obviously wish to get more complex in the future.
THIS is the reason why I looked for LESS library.
Take you time... I wish to have a clear explicative answer.
Or some reference links to read.
My house isn't on fire.
Try this:
#keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
#{Bes_ease_in_finish} { opacity: 1; } /* <--- Line 75 is here. */
#{Bes_ease_out_begin} { opacity: 1; animation-timing-function: ease-out; }
#{Bes_ease_out_finish} { opacity: 0; }
100% { opacity: 0 }
}
Instead of #variable you should use #{variable} when using dynamic directives. (is directive the right word? dunno)
It seems there's something unseen in LESS to me. I expect something like this in CSS:
.animate.fade-in, .animate-hover.fade-in:hover {
animation-name: fade-in;
}
my LESS is :
.animate, .animate-hover:hover {
&.fade-in {
animation-name: fade-in;
}
}
But what I get is :
.animate.fade-in, .animate-hover:hover.fade-in {
animation-name: fade-in;
}
:hover's place is not true in output.
This is a tricky situation, mainly because it seems to be a case where LESS is MORE. You could, instead of repeating .animate, repeat the .fade-in like so:
LESS
.animate {
&.fade-in, &-hover.fade-in:hover {
animation-name: fade-in;
}
}
CSS Output
.animate.fade-in,
.animate-hover.fade-in:hover {
animation-name: fade-in;
}
But the LESS input looks suspiciously more complicated and nearly just as long as just doing it straight as the expected css output. So it may be best to just do that... unless you are using this as a foundation for building a mixin to do various animations this way, something like so:
.nameAnimation(#name) {
.animate {
&.#{name}, &-hover.#{name}:hover {
animation-name: #name;
}
}
}
.nameAnimation(fade-in);
.nameAnimation(fade-out);
.nameAnimation(whaaa);
You can achieve that using fade-in as a parent selector (since & is a place holder for the parent selector).
This should obtain what you expect:
.fade-in {
.animate&, .animate-hover&:hover {
animation-name: fade-in;
}
}
Try this:
.animate, .animate-hover {
&.fade-in, &.fade-in:hover {
animation-name: fade-in;
}
}
I'll be honest, I'm not sure if this is the best way to do this, but it is the first solution I thought of off when I saw the question. I will say, however, that if I were in your situation, this is probably what I would do.
I have realized that I can't simple accomplish the same code below by separating by coma #keyframes mymove, #-moz-keyframes mymove, etc... In order for them to work I need to declare it each one separately as below.
Is there any way to group them and make this code shorter?
#keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
#-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
#-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
no, I don't think so, but you could use a CSS language (aka CSS preprocessor) like SASS/SCSS/LESS/... - the output (CSS) would still be the same, but changing something would be much easier!
Check out
http://sass-lang.com/
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
if you're interested - the effort of installing them and setting them up is totally worth it!
EDIT: Using SCSS I did the following:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} { #content; }
#-moz-keyframes #{$name} { #content; }
#keyframes #{$name} { #content; }
}
example of usage:
#include keyframes(pulse) {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Although it should be added that you need the latest pre-release of SASS to be able to nest rules (we have got a "{" inside another "{" rule...) so you should update run "gem install sass --pre" which should get you "sass-3.2.0.alpha.104"