We Keep Coding

How can I access a css to animate in javascript Vue JS

I am having a little trouble in using javascript to access a css animation. My goal in this code is if you click the next button or previous button the border should spin but I am having trouble to trigger the css animation.
This is my html
<template>
<div v-on:click="prev" class="prevButton"><p><</p></div>
<div class="borderTop"></div>
<div v-on:click="next" class="nextButton"><p>></p></div>
</template>
This is the css
.border{
position: fixed;
height: 500px;
width: 500px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
border: 120px solid rgba(0, 0, 0, 0.555);
transform: rotate(45deg);
-webkit-animation: spin 2s linear; /* Safari */
animation: spin 2s linear;
}
#keyframes spin {
0% { transform: rotate(0deg);
border-right: 120px solid rgba(255, 255, 255, 0.226);}
100% { transform: rotate(360deg); }
}
this is the javascript
prev(){
document.querySelector(".borderTop").animate;
}
next(){
document.querySelector(".borderTop").animate;
}

You can't trigger the animation from Javascript. Instead you should add your animation style to an additional class which you can add to the div for the duration of the animation.
.animate {
animation: spin 2s linear;
}
Add anther class with animation-direction: reverse; if you would like to reverse the animation for the prev button.
prev() {
document.querySelector('.borderTop').classList.add('animate');
// Remove the animate class after the spin was performed so it works again when the button is clicked.
setTimeout(function() {
document.querySelector('.borderTop').classList.remove('animate');
}, 2000)
});
}
next() {
document.querySelector('.borderTop').classList.add('animate');
setTimeout(function() {
document.querySelector('.borderTop').classList.remove('animate');
}, 2000)
});
}

let borderAnimatable = document.querySelector(".borderTop")
prev(){
borderAnimatable.style.animation = "spin 2s linear";
borderAnimatable.style.WebkitAnimation = "spin 2s linear";
}
next(){
borderAnimatable.style.animation = "spin 2s linear";
borderAnimatable.style.WebkitAnimation = "spin 2s linear";
}

I need multiline type writing effect with multiple loops i.e. after finishing the all lines, start again in CSS

I used "animation-iteration-count: infinite" but it needs to be used of every line separately. I need it to be applied on all lines combined. My code uses separate CSS class for every line which is quite annoying. I need one single class to be applied on whole text no matter how many line or paragraphs there are. Below is my code.
.css-typing p {
font-family: "Courier";
font-size: 14px;
width: 200em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 2s steps(40, end);
animation: type 4s steps(40, end);
animation-iteration-count: infinite;
}
.css-typing p:nth-child(2) {
white-space: nowrap;
overflow: hidden;
opacity: 0;
-webkit-animation: type 2s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 5s;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
white-space: nowrap;
overflow: hidden;
opacity: 0;
-webkit-animation: type 5s steps(40, end);
animation: type3 4s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 10s;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes type {
from {
width: 0;
}
}
#-webkit-keyframes type {
from {
width: 0;
}
}
span {
animation: blink 1s infinite;
}
#keyframes type2 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes type3 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="css-typing">
<p>
Typed <br> text 1
</p>
<p>
Typed text 2
</p>
<p>
Typed text 3
</p>
</div>

I think CSS animation is not the way to go.
If possible, you can actually write the characters to the browser from JS.
From the top of my head you should have:
Text in JS array. each element represents a line.
setInterval that calls a function that pops each time a line
another setInterval or setTimeout that will put each letter there, using substr and keep an index where you are at any given time.
If you don't want to code, google for codepen typing effect, I'm sure you will find something you will like.

How to change background when using typed.js?

I am using typed.js from the link http://www.mattboldt.com/demos/typed-js/. Its working very nicely. Now I want to change my body background every time when a sentence completed.
I mean when "abcd ef" comes background should be blue.
for "ghijkl" ---the background should be red
and so on.
How can I do this. Please share with me if any one has any idea. I am adding my code below.
<div id="typed-strings">
<p><span>abcd ef.</span></p>
<p><span>ghijkl.</span></p>
<p><span>mnopqr.</span></p>
<p><span>stuvwxyz.</span></p>
</div>
<span id="typed" class=""></span>
<script src="/assets/typed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#typed").typed({
// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
stringsElement: $('#typed-strings'),
typeSpeed: 60,
backDelay: 800,
loop: true,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
function newTyped(){ console.log("Call");/* A new typed object */ }
function foo(){ console.log("Callback"); }
</script>
<style type="text/css">
/* code for animated blinking cursor */
.typed-cursor{
opacity: 1;
font-weight: 100;
font-size: 36px;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
-ms-animation: blink 0.7s infinite;
-o-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>

here what you need:
after
loopCount: false,
insert this line
preStringTyped: function() { alert('background change happens now'); },
p.s. just change alert to your function. So, that will trigger when each sentence starts.

Time for setting the background-color !
As simple as
$(".element").typed({
strings: ["First sentence.<style>body{background-color: yellow}</style>Second sentence.<style>body{background-color: red}</style>"],
typeSpeed: 1,
contentType: "html"
});

Got the solution:
$(function(){
var x=1;
$("#typed").typed({
// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
stringsElement: $('#typed-strings'),
typeSpeed: 100,
backDelay: 1000,
loop: true,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
/*preStringTyped: function() { myfunc(); },*/
callback: function(){ foo(); },
preStringTyped: function() {
console.log(x);
x++;
if(x == 5) {
x = 1;
}
if(x == 1){
$("#start").addClass("myimg4").removeClass("myimg1 myimg2 myimg3");
}
if(x == 2){
$("#start").addClass("myimg1").removeClass("myimg2 myimg3 myimg4");
}
if(x == 3){
$("#start").addClass("myimg2").removeClass("myimg1 myimg3 myimg4");
}
if(x == 4){
$("#start").addClass("myimg3").removeClass("myimg1 myimg2 myimg4");
}
myfunc(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
css
.myimg1 {
background-image: url('../assets/home/bg_1.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg2 {
background-image: url('../assets/home/bg_2.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg3 {
background-image: url('../assets/home/bg_3.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg4 {
background-image: url('../assets/home/bg_4.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}

How to make the animation on a website where a piece of text changes every seconds?

It's like the animation they have on npm front page and also on the brown hackathon page. Where a piece of text erases and appears every few seconds with different content. I think There may be an existing template for it online, but what do they call it?

This is basic idea how to create this kind of animation check following snippet:
If you want to expend this animation just add letters in array.
$(function() {
var arr = ['t','te','tex','text','G','Go','Goo','Goog','Googl','Googl','Google'];
var elem = $('#ani');
var i = 0;
var loop = function(){
elem.text(arr[i++]);
if(i>arr.length) {
//clearInterval(intervalID);
i=0;
}
}
var intervalID = setInterval(loop, 500);
})
.test{
font-size:26px;
color:green;
}
.ani{
color:red;
}
.ani::after{
content:"|";
-webkit-animation: cursor-blink 0.8s linear infinite;
-moz-animation: cursor-blink 0.8s linear infinite;
-o-animation: cursor-blink 0.8s linear infinite;
animation: cursor-blink 0.8s linear infinite;
}
#-moz-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-o-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="test">
This is text
<span class="ani" id="ani">
Google
</span>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Trigger animation on scroll down

Here i creat animation that turns from color to grayscale but i want it will start only when user will scroll down (as it's in my site with a lot of images and need to scroll down to get there)
here is the fiddle example:
http://jsfiddle.net/4tHWg/7/
.box {
float: left;
position: relative;
width: 14.285714286%;
}
.boxInner img {
width: 100%;
display: block;
}
.boxInner img:hover {
-webkit-filter: grayscale(0%);
}
#-webkit-keyframes toGrayScale {
to {
-webkit-filter: grayscale(100%);
}
}
.box:nth-child(1) img {
-webkit-animation: toGrayScale 1s 0.5s forwards;
}
.box:nth-child(2) img {
-webkit-animation: toGrayScale 2s 1s forwards;
}
.box:nth-child(3) img {
-webkit-animation: toGrayScale 3s 1.5s forwards;
}

This should do the trick.
$( window ).scroll(function() {
$(".box").each(function (index){
if (index == 1)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 1s 0.5s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 2s 1s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 3s 1.5s forwards');
}
});

If I understand correctly what you are looking to do, then you can handle scrolling with .scroll() function. Then trigger the animation if the windows .scrollTop() reaches each .box's offset().top.
$(window).scroll(function(){
var st = $(this).scrollTop();
$('.box').each(function(index, element){
if(st >= $(this).offset().top){
$(this).find('img').css({'-webkit-animation':'toGrayScale 1s 1s forwards'});
}
});
});
Here is the updated fiddle.