What animation is this?

Community Off Topic
1

Hello guys,

on this website:

If you scroll a bit you can see boxes with hover effects. I was wondering, what are this web developer using for the services animation boxes? Is it javascript? How do you know?

Thanks!

2

You can right click on a webpage, and select: inspect element, which allows you to view the source code of a website, i see css (transform), and then in particular matrix i also see:

<script src="http://www.secretkey.it/wp-content/themes/secretkey/js/jquery-1.11.1.min.js?23f616"></script>

which indicates the use of jquery. I am not going to inspect all files and code used, but you could do that, and look up the stuff you find in documentation.

I would say it is a mixture of js, jquery (jquery is a js library) and css (css3 property’s in particular)

1 Like
3

Great answer! Thank you, stetim94!

4

I am sure there are tutorials on how to inspect webpages (youtube is a good place, you need to see the inspecting, best way to get the hang of it), you can find many background about the js and css code on MDN (Mozilla developers network), just add MDN at the end of your search query (or beginning)

1 Like
5

Wonderful, thank you your help!

As a beginner, I wasn’t quite sure where to look at while searching for the javascript code. I thought that were just before the element I was inspecting.

Thank you, again!

6

Javascript code is usually inside the <head></head>, there are links to the js files, which you can just open (js is generally written in separate files), or at at the very end of the html document. Css can be at the element (style attribute, also called inline style/css):

<p style="color: red">

or as internal stylesheet (the style is in the html file, if this method is used in the <head></head>:

<style>
p {
  color: red;
}
<style>

or as external stylesheet:

<link rel="stylesheet" href="stylesheet.css">

then the css in a separate file (which is why it is called external stylesheet). programmers like to give logical names

JS can also be used in internal form, the script tag don’t contain a src (source) attirubte, but contain the js code directly, internal:

<script>
console.log("i work");
</script>

or external (with src attribute, which tells the script tag where js file is located):

<script src="scriptname.js"></script>

Hopes this helps you to find what you are looking for on the webpage, good luck!

2 Likes
7

Thank you stetim94, your help was invaluable!