#harry's tutorials

this isnt super hard ig? just requires some knowledge about the DOM(document object model) and how to assign stuff to stuff in js

1. have element you wanna do the typewriter effect on. give it an id of whatever you want, i gave it the id of js. 

2.  create script tags at the bottom of the page using <script> </script>. 

in between them, put in the code 

const text = "Placeholder"

let index = 0;

function writeText(){ var x = document.getElementById("js");  x.innerText = text.slice(0, index);

index ++;  

if (index > (text.length + 1 )) 

{

   index = 0;  }

}

setInterval(writeText, 500);

this creates a function that writes the text in the text variable(Placeholder) every 500 milliseconds, and when index = 0, it resets.

change placeholder to your liking and don’t forget to change the id!

hope this helped, check out my codepen + my github

what you’ll need: a tumblr page, and an understanding of basic html and css. this tutorial requires you to edit your tumblr theme. i’m currently using a base code from egg.docs.tumblr.com just to make it easier for me to edit.

for this example, i’m gonna change the color of an element from red to blue

ok, so step 1: go to edit theme on your blog. press edit html. find something you wanna change the color of. what I did was I created a new element, like this

 <section class="wanted" id ="js"> WANTED</section>.

take note of the class here(this is gonna be important), the id isnt really important, i only added that cos i was doing some javascript stuff. but you can use anything on your tumblr page.

in my da blog, which i was using the normal tumblr theme for, i put in my element. 

step 2: thats all you need to do for the html side. the rest is css! to get to the custom css part, navigate back out of the html part, go to the very bottom, and click advanced settings. you’re gonna need to type into the custom css box.  css works by targeting a specific element(often using the id or class) and changing the style of it. so first we need to select the element we want to apply the styles to. this is done by typing in

 .classname{}

remember to not forget the dot before the class, it’s what actually labels it as a class. 

step 3: 

you’re gonna need to use the animation property in css, as well as the keyframe property. we’ll start with the keyframe property. 

out of your curly brackets, under the classname + still in the custom css, type in

 @keyframes nameofanimation {from{color: red;}to{color: blue;}}

the name of the animation can be anything you wish, it just needs to be one word. from and to are the states that you can change from. 

step 4:

back in your class name, we’re gonna use the animation property. this works with the keyframe you just called. 

the animation property is structured like this: 

animation: nameofanimation duration timing-function delay iterationcount direction;

 name of animation is the name of the animation that you set in the keyframe rule, in my example, it would be redtoblue. 

duration is how long you want the animation to run for(until it reverts back to the beginning

timing-function is the speed curve, if you want an easing or not

delay is if you want the animation to stop when the page loads and become delayed

iteration count is how long you want the animation to repeat for until it stops(this is normally set to infinite)

direction is if you want the animation to go forward, or the animation to reverse. (these values are forward, backward, and alternate(which goes between forward and backward)

this is what i used!

now, you should see the animation fluctuate between red and blue(if you used the code i used)

if you need more help, don’t hesitate to send me an ask!