Help with scss

HTML & CSS
1

Thanks for all/any previous help.

Just to experiment with adding some web animation to a web page, I am attempting to add a web text animation, so I copied the scss code from the CodePen example, ran the scss code through an online scss to css compiler, then copied the css code (although the resulting css compiled code looks exactly the same as the scss). Added this link to the page, that has the css:

<link rel="stylesheet" type="text/css" href="/header.css">

Also added the link to the page: https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js

And added the js code on the page, between script tags, like so:

<script>.....</script>

However, I see the text line, but no animation. Here’s the css and html:

* {
	box-sizing: border-box;
}

body {
	min-height: 50vh;
	background: #696969;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

blockquote {
	font-size: 3rem;
}

cite {
	display: block;
	text-align: right;
	font-family: Verdana, Arial, sans-serif;
	margin-top: 1rem;
	font-size: .9rem;
	color: #aaa;
	font-style: normal;
}

blockquote q {
	font-family: Georgia, serif;
	font-style: italic;
	letter-spacing: .1rem;
}

blockquote q span {
	will-change: opacity, filter;
	opacity: 0;
	filter: blur(0px);
}

q {
	quotes: "“" "”" "‘" "’";
}

q:before {
	content: open-quote;
	margin-right: .8rem;
}

q:after {
	content: close-quote;
}

q:before, q:after {
	color: #ccc;
	font-size: 4rem;
}

and html:

<div class="row">
   <blockquote contenteditable="true"><q>What we think, we become.</q>
  					   <cite>Gautama Buddha</cite>
						</blockquote>

</div>

any help with what I’ve done incorrectly, will be appreciated

2

Wouldn’t it have been easier to start with CSS animations rather than jumping straight into a js animation library?

I don’t think you’ve given us enough to work with. Where is the script to trigger the animation?

Please post a full example like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
	box-sizing: border-box;
}
body {
	min-height: 50vh;
	background: #696969;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
blockquote {
	font-size: 3rem;
}
cite {
	display: block;
	text-align: right;
	font-family: Verdana, Arial, sans-serif;
	margin-top: 1rem;
 font-size: .9rem;
	color: #aaa;
	font-style: normal;
}
blockquote q {
	font-family: Georgia, serif;
	font-style: italic;
 letter-spacing: .1rem;
}
blockquote q span {
	will-change: opacity, filter;
	opacity: 0;
	filter: blur(0px);
}
q {
	quotes: "“" "”" "‘" "’";
}
q:before {
	content: open-quote;
 margin-right: .8rem;
}
q:after {
	content: close-quote;
}
q:before, q:after {
	color: #ccc;
	font-size: 4rem;
}
</style>
</head>

<body>
<div class="row">
  <blockquote class="pulse" contenteditable="true"><q>What we think, we become.</q> <cite>Gautama Buddha</cite> </blockquote>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script> 
<script>
    var elem = document.querySelector('.pulse');
    var animation = elem.animate({
        opacity: [0.5, 1],
        transform: ['scale(0.5)', 'scale(1)'],
    }, {
        direction: 'alternate',
        duration: 500,
        iterations: Infinity,
    });
</script>
</body>
</html>
1 Like
3

Thanks for your reply.

I don’t know what your code here is for:

<script>
    var elem = document.querySelector('.pulse');
    var animation = elem.animate({
        opacity: [0.5, 1],
        transform: ['scale(0.5)', 'scale(1)'],
    }, {
        direction: 'alternate',
        duration: 500,
        iterations: Infinity,
    });
</script>

but here the js script code that comes with the CodePen:

<script>

function splitWords() {
  let quote = document.querySelector("blockquote q");
  quote.innerText.replace(/(<([^>]+)>)/ig,"");
  quotewords = quote.innerText.split(" "),
  wordCount = quotewords.length;
  quote.innerHTML = "";
  for (let i=0; i < wordCount; i++) {
    quote.innerHTML += "<span>"+quotewords[i]+"</span>";
    if (i < quotewords.length - 1) {
      quote.innerHTML += " ";
    }
  }
  quotewords = document.querySelectorAll("blockquote q span");
  fadeWords(quotewords);
}

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function fadeWords(quotewords) {
  Array.prototype.forEach.call(quotewords, function(word) {
    let animate = word.animate([{
      opacity: 0,
      filter: "blur("+getRandom(2,5)+"px)"
    }, {
      opacity: 1,
      filter: "blur(0px)"
    }],
    {
      duration: 1000,
      delay: getRandom(500,3300),
      fill: 'forwards'
    }
   )
  })
}


splitWords();
</script>

any additional help is welcomed

4

That’s the script that does the pulse animation. Did you not see the text pulsing in the demo I posted?

You added a JS animation library:

I simply searched the web to see where you got it and how to use it. You have to trigger your animation with the correct function.

Perhaps it would be better if you could show the codepen in question?

Presently you have no css or js that will cause an animation to occur.

1 Like
5

Yes that’s the script that does the animation (not sure why you thought it good to leave out from your first post though) and if you put all the parts of the code together it works as expected!

What was your problem again?

I see the text line fade in randomly once, which seems to be exactly what you are telling it to do.

Here is your code in a working page:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
	box-sizing: border-box;
}
body {
	min-height: 50vh;
	background: #696969;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
blockquote {
	font-size: 3rem;
}
cite {
	display: block;
	text-align: right;
	font-family: Verdana, Arial, sans-serif;
	margin-top: 1rem;
 font-size: .9rem;
	color: #aaa;
	font-style: normal;
}
blockquote q {
	font-family: Georgia, serif;
	font-style: italic;
 letter-spacing: .1rem;
}
blockquote q span {
	will-change: opacity, filter;
	opacity: 0;
	filter: blur(0px);
}
q {
	quotes: "“" "”" "‘" "’";
}
q:before {
	content: open-quote;
 margin-right: .8rem;
}
q:after {
	content: close-quote;
}
q:before, q:after {
	color: #ccc;
	font-size: 4rem;
}
</style>
</head>

<body>
<div class="row">
  <blockquote contenteditable="true"><q>What we think, we become.</q> <cite>Gautama Buddha</cite> </blockquote>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script> 
<script>
function splitWords() {
  let quote = document.querySelector("blockquote q");
  quote.innerText.replace(/(<([^>]+)>)/ig,"");
  quotewords = quote.innerText.split(" "),
  wordCount = quotewords.length;
  quote.innerHTML = "";
  for (let i=0; i < wordCount; i++) {
    quote.innerHTML += "<span>"+quotewords[i]+"</span>";
    if (i < quotewords.length - 1) {
      quote.innerHTML += " ";
    }
  }
  quotewords = document.querySelectorAll("blockquote q span");
  fadeWords(quotewords);
}

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function fadeWords(quotewords) {
  Array.prototype.forEach.call(quotewords, function(word) {
    let animate = word.animate([{
      opacity: 0,
      filter: "blur("+getRandom(2,5)+"px)"
    }, {
      opacity: 1,
      filter: "blur(0px)"
    }],
    {
      duration: 1000,
      delay: getRandom(500,3300),
      fill: 'forwards'
    }
   )
  })
}


splitWords();
</script>
</body>
</html>

Rather than to and fro-ing with half truths a working demo of your problem would get this solved much quicker :). Just make working demos as I have posted twice that show all the code in place and exhibit the problem you are encountering. Otherwise its just a guessing game (albeit I’m pretty good at guessing these days :slight_smile: )

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.