- Notifications
You must be signed in to change notification settings - Fork0
This project put in scene Parallax animation. The use is really easy and simple. You don't need a CSS file
License
MSay2/Simple-Parallax-HTML-JavaScript
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
<scriptsrc="./parallax.js"></script>
Create a<div> tag with a name of classparallax-container
The name of this class is really really important.
<divclass="parallax-container"></div>
Insert the attributedata-type and insert the valueparallax to this attribute
This value
parallaxis for notifying than the element is executable as animation of the Parallax.
data-type="parallax"Insert the attributedata-min-height and insert the valuenumber PX to this attribute
This is to configure the minimal height, if this value is empty, she send an null value and the height minimal will be of 200px.
data-min-height="380px"Insert the attributedata-src and insert the directory access of your image
This attribute
data-srcis for applying of your image,srccorrespond to Source of your image, if this attribute send an value null or if this attribute is not insert on your<div>tag or if the diretory of access to your image is incorrect, theconsole.error()stipulate that an error is committed.
data-src="./parallax-background.png"Note that your image will execute like an Parallax, the animation will be good, but you can also add an animation of scrolling for the image and exclusive for your image, this is for an parallax again more thrust and more beautiful
Insert the attributedata-animation in your<div> tag and insert thetrue value to this attribute
Now look at how the animations acts like with and without this attribute. And look at the difference.
data-animation="true"Insert the attributedata-division in your<div> tag and insert an value encrypted (a number).
4 is a default number
data-division="4"- data-type
- data-min-height
- data-min-width
- data-src
- data-animation
- data-division
Copyright (c) 2019 MSay2Licensed to the Apache Software Foundation (ASF) under one or more contributorlicense agreements. See the NOTICE file distributed with this work foradditional information regarding copyright ownership. The ASF licenses thisfile to you under the Apache License, Version 2.0 (the "License"); you may notuse this file except in compliance with the License. You may obtain a copy ofthe License at http://www.apache.org/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed under the License is distributed on an "AS IS" BASIS, WITHOUTWARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See theLicense for the specific language governing permissions and limitations underthe License.About
This project put in scene Parallax animation. The use is really easy and simple. You don't need a CSS file
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.