How to Create Parallax Scrolling with SimpleParallax

SimpleParallax is a very simple and tiny JavaScript library which adds parallax animations on any images.

The parallax effect is added directly on image tags, there is no need to use background-image like most of the other parallax libraries do. Basically, you can add parallax effects on a production website without breaking its layout.

You can also choose to apply the parallax on picture tags/srcset images. The implementation is quite straightforward and the animation is smooth and natural.

Installation

Installation is very simple. You can choose to include the script directly into your HTML:

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

Or choose to install it via npm/yarn:

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

Once you have installed it via a package manager, you can import it as follows:

import simpleParallax from 'simple-parallax-js';

Initialization

To add the parallax effect, you can target any images you want. For example:

<img class="thumbnail" src="image.jpg" alt="image">

Simply add the following JavaScript code:

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

You can also choose to apply the parallax on multiple images, something like:

var images = document.querySelectorAll(img);
new simpleParallax(images);

Main cases

By default, if you do not specify any parameters, simpleParallax will use the up orientation. It will result in the image translating from bottom to top when scrolling down, and from top to bottom when scrolling up.

You can choose among these orientations - up - right - down - left - up left - up right - down left - down right.

If you wish to apply different settings on various images, don't hesitate to initialize several instances of simpleParallax. The library will automatically add the new instances in the same process loop of current instances. Therefore, no extra performance will be consumed.

 <img class="left" src="image.jpg" alt="image">
 <img class="right" src="image.jpg" alt="image">

var imageLeft = document.querySelector('.left'),
    imageRight = document.querySelector('.right');

new simpleParallax(imageLeft, { 
    orientation: 'left' 
});
new simpleParallax(imageRight, { 
    orientation: 'right' 
});

More settings

The parallax effect is created with a scaling effect applied to the image. This scaling effect can be easily changed (the default value is 1.3). The higher the scale will be set, the faster and more visible the parallax effect will be.

new simpleParallax(image, { 
    scale: 2 
});

overflow is another interesting setting. The overflow is set to false by default. If set to true, the image will be translated out of its natural flow.

new simpleParallax(image, { 
    overflow: true 
});

Useful links

• Github
• Demo website with examples
• Case study on Medium

Original article source at: https://tutorialzine.com/

#javascript #parallax 

Build a Beautiful Parallax Effect in React Native with Reanimated 2

Learn how to build a beautiful Parallax effect in React Native, based on the phone sensors using the React Native Reanimated library

In this tutorial, we will build a beautiful Parallax effect in React Native, based on the phone sensors. For that, we will use the React Native Reanimated library, allowing us to get data from the phone sensors, like the gyroscope, and drive animations with them.

This project is a great way to get your foot in the door with hybrid, cross-platform mobile development with React Native. This is a beginner-friendly tutorial, and all the steps and concepts will be explained in detail.

🐱‍💻 Source code
https://github.com/notJust-dev/iOSLoc... 

#parallax #reactnative

MPParallaxView: Apple TV Parallax effect in Swift

MPParallaxView

Apple TV Parallax effect in Swift. Rotate view using touch or accelerometer.

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Want to quickly look at demo? Type pod try MPParallaxView!

Parallax effect

You can easily customize Parallax View in Storyboard! Jump into Example project to look at properties.

How about accelerometer parallax instead of touch? Set Accelerometer Enabled to On in Storyboard.

There are 3 different ways to set up parallax:

• .basedOnHierarchyInParallaxView - views in background moves less than views in foreground. You can increase the movement by changing multiplerOfIndexInHierarchyToParallaxOffset - this value will be multiplied by index of view in hierarchy. Default.
• .basedOnTag - set a tag for a view. For instance, snowflakes image view has 13 tag which means noticeable movement. On the other hand, top view with cast members has 1 tag - almost no movement.
• .custom(Int) - provide your custom value.

Requirements

Xcode 8, iOS 9

Installation

MPParallaxView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "MPParallaxView"

Author

Michal Pyrka
Twitter: mikep_3

Other

Check out the article about this repo: Apple TV Parallax Effect in Swift

Inspired by Designmodo
Thanks Konstantine Trundayev for Interstellar assets!

Download Details:

Author: DroidsOnRoids
Source Code: https://github.com/DroidsOnRoids/MPParallaxView 
License: MIT license

#swift #ios #parallax 

ParallaxView: tvOS Controls and Extensions That Add Parallax Effect

ParallaxView

Summary

Easy to use UIView, UICollectionViewCell with parallax effect and extensions to add this effect to any UIView. Rotate view using Apple TV remote. Works confusingly similar to tiles in the home screen of the Apple TV.

ParallaxView

Open your storyboard or xib and drag and drop UIView control. Change custom class to ParallaxView in Identity inspector. You can also create control from code.

ParallaxCollectionViewCell

In Interface builder change collection view cell class to ParallaxCollectionViewCell or do it from code.

You can also create subclass of ParallaxCollectionViewCell insted of UICollectionViewCell and use it as normal collection view cell.

Extension

If ParallaxView and ParallaxCollectionViewCell don't fit to your needs you can use extension that can be used with any UIView. In many cases it can look like in this example:

override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
    coordinator.addCoordinatedAnimations({
        if context.nextFocusedView === yourCustomView {
            yourCustomView.addParallaxMotionEffects()
        }
        if context.previouslyFocusedView === yourCustomView {
            yourCustomView.removeParallaxMotionEffects()
        }
    }, completion: nil)
}

It is important to add and remove parallax effect inside the animation block to avoid the glitches. ParallaxView and ParallaxCollectionViewCell internally use the same methods. For more details look into example.

Customisation

The component is documented in code, also look into example for more details.

Documentation

Properties

ParallaxView and ParallaxCollectionViewCell have the same properties for customisation.

parallaxEffectOptions - using this property you can customize parallax effect.

• parallaxMotionEffect - configure parallax effect (pan, angles, etc.)
• subviewsParallaxMode - enum that allow you to configure parallax effect for subviews of the ParallaxView
• shadowPanDeviation - maximal value of points that shadow of the ParallaxView will be moved during parallax effect
• glowAlpha - configure alpha of the glow effect (if is equal to 0.0 then the glow effect will be not added)
• parallaxSubviewsContainer - custom container view that will be usead to apply subviews parallax effect. By default it will be parallaxable view by itself.
• glowContainerView - view that will be used as the container for the glow effect. You don't have to configure this because for ParallaxView it will be automatically created a subview for this purpose, while for ParallaxCollectionViewCell it will be used contentView of the cell. Also by default it is nil when you use extension (self will be used as the glow container but only if glowAlpha is bigger than 0.0). But if you want to, you can define custom view - look into example project for more details.
• glowImageView - image view that will be used as the glow effect. ParallaxView framework provides default image that will be set.

glowPosition - (.top default) - allows to customize position of the glow effect related to the glowImageContainer. You can provide custom setup by creating GlowPosition instance.

parallaxViewActions - use properties of this property to change default behaviours of the parallax view. Internally both ParallaxView and ParallaxCollectionViewCell calls callbacks.

• setupUnfocusedState - closure will be called in animation block when view should change its appearance to the focused state
• setupFocusedState - closure will be called in animation block when view should change its appearance to the unfocused state
• beforeBecomeFocusedAnimation - closure will be called before the animation to the focused change start
• beforeResignFocusAnimation - closure will be called before the animation to the unfocused change start
• becomeFocused - closure will be called when didFocusChange happened. In most cases default implementation should work
• resignFocus - closure will be called when didFocusChange happened. In most cases default implementation should work.
• animatePressIn - default implementation of the press begin animation
• animatePressOut - default implementation of the press ended animation

cornerRadius - use this value insted of self.view.layer.cornerRadius. This will automatically correct radius for glow effect view if it is necessary

Requirements

Swift 5.0, tvOS 9.0

Installation

CocoaPods

Add line to Podfile

# ...
target 'MyApp' do
  # your other pod
  # ...
  pod 'ParallaxView'
end
# ...

Carthage

Add a line to Cartfile:

github "PGSSoft/ParallaxView"

Swift Package Manager (SPM)

Xcode 12 (Swift 5.3) required!

In Xcode:

Select File > Swift Packages > Add Package Dependency. Enter https://github.com/PGSSoft/ParallaxView

If you would like to check more details please visit the Apple's documentation

Manual

You can download the latest files from our Releases page. After doing so, drag ParallaxView.xcodeproj into your project in Xcode, and for your project target on General tab in Embedded Binaries section add ParallaxView.framework. Example project is configured the same way, so you have the crib sheet.

Usage

import ParallaxView

Author: PGSSoft
Source Code: https://github.com/PGSSoft/ParallaxView
License: MIT license

#ios #swift #parallax 

Easily Apply Tilt Hover Effect on React Components - Lightweight/zero

React Tilt   

👀 Easily apply tilt hover effect on React components

Demo 💥

Install

npm install react-parallax-tilt

Features

• Lightweight (≈3kB), zero dependencies 📦
• Works with React v15 onwards
• Supports mouse and touch events
• Support for device tilting (gyroscope)
• Glare effect 🌟 with custom props (color, position,...) 🔗demo
• Events to keep track of component values 📐 (tilt, glare, mousemove,...) 🔗demo
• Many effects that can be easily applied:
  • scale on hover 🔗demo
  • disable x/y axis 🔗demo
  • flip component vertically/horizontally 🔗demo
  • tilt hover effect on the whole window 🔗demo
  • tilt component with custom manual input 🕹 (joystick, slider etc.) 🔗demo
  • parallax effect on overlaid images 🔗demo

Example

import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';

const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>React Parallax Tilt 👀</h1>
      </div>
    </Tilt>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

All of the props are optional.
Below is the complete list of possible props and their options:

▶︎ indicates the default value if there's one

tiltEnable: boolean ▶︎ true
Boolean to enable/disable tilt effect.

tiltReverse: boolean ▶︎ false
Reverse the tilt direction.

tiltAngleXInitial: number ▶︎ 0
Initial tilt value (degrees) on x axis.

tiltAngleYInitial: number ▶︎ 0
Initial tilt value (degrees) on y axis.

tiltMaxAngleX: number ▶︎ 20
Max tilt rotation (degrees) on x axis (range: 0°-90°).

tiltMaxAngleY: number ▶︎ 20
Max tilt rotation (degrees) on y axis (range: 0°-90°).

tiltAxis: 'x' | 'y' ▶︎ undefined
Enable tilt on single axis.

tiltAngleXManual: number | null} ▶︎ null
Manual tilt rotation (degrees) on x axis.

tiltAngleYManual: number | null} ▶︎ null
Manual tilt rotation (degrees) on y axis.

glareEnable: boolean ▶︎ false
Boolean to enable/disable glare effect.

glareMaxOpacity: number ▶︎ 0.7
The maximum glare opacity (range: 0-1).

glareColor: string ▶︎ #ffffff
Set color of glare effect.

glareBorderRadius: string ▶︎ 0
Accepts any standard CSS border radius. Useful if the glare color is different to the page color.

glarePosition: 'top' | 'right' | 'bottom' | 'left' | 'all' ▶︎ bottom
Set position of glare effect.

glareReverse: boolean ▶︎ false
Reverse the glare direction.

scale: number ▶︎ 1
Scale of the component (1.5 = 150%, 2 = 200%, etc.).

perspective: number ▶︎ 1000
The perspective property defines how far the object (wrapped/child component) is away from the user. The lower the more extreme the tilt gets.

flipVertically: boolean ▶︎ false
Boolean to enable/disable vertical flip of component.

flipHorizontally: boolean ▶︎ false
Boolean to enable/disable horizontal flip of component.

reset: boolean ▶︎ true
If the effects has to be reset on onLeave event.

transitionEasing: string ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing of the transition when manipulating the component.

transitionSpeed: number ▶︎ 400
Speed of the transition when manipulating the component.

trackOnWindow: boolean ▶︎ false
Track mouse and touch events on the whole window.

gyroscope: boolean ▶︎ false
Boolean to enable/disable device orientation detection.

onMove: Function => ({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, eventType: string | null }) => void
Gets triggered when user moves on the component.

onEnter: Function => (eventType: string | null) => void
Gets triggered when user enters the component.

onLeave: Function => (eventType: string | null) => void
Gets triggered when user leaves the component.

Gyroscope - Device Orientation

Please keep in mind that detecting device orientation is currently experimental technology.
Check the browser compatibility before using this in production.
A few takeaways when using device orientation event:

• always use secure origins (such as https)
• it doesn't work in all browsers when using it in cross-origin <iframe> element

Using device orientation on iOS 13+

Apple decided turning device motion and orientation off by default since iOS 12.2.
With iOS 13+ permission API can be used to gain access to device orientation event.

When using gyroscope feature:

<Tilt gyroscope={true}>
  <h1>React Parallax Tilt 👀</h1>
</Tilt>

it will present a permission dialog prompting the user to allow motion and orientation access at domain level:

Note that user needs to take some action (like tapping a button) to be able to display the dialog (invoking dialog on page load is not possible).

Development

Easily set up a local development environment!

Build project and start storybook on localhost:

• clone
• npm install
• npm start

Start coding! 🎉

Or setup with npm linkClone this repo on your machine, navigate to its location in the terminal and run:

npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes

Clone project repo that you wish to test with react-parallax-tilt library and run:

npm install
npm link react-parallax-tilt # link your local copy into this project's node_modules
npm start

Contributing

All contributions are welcome!
Please take a moment to review guidelines PR | Issues

Author: Mkosir
Source Code: https://github.com/mkosir/react-parallax-tilt 
License: MIT license

#react #typescript #parallax 

Detection Of Elements in Viewport & Smooth Scrolling with Parallax

Locomotive Scroll - Detection of elements in viewport & smooth scrolling with parallax effects.

Installation

⚠️ Scroll-hijacking is a controversial practice that can cause usability, accessibility, and performance issues. Please use responsibly.

npm install locomotive-scroll

Usage

Basic

With simple detection.

HTML

<h1 data-scroll>Hey</h1>
<p data-scroll>👋</p>

CSS

Add the base styles to your CSS file.

locomotive-scroll.css

JS

With a bundler

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

Or without

<script src="locomotive-scroll.min.js"></script>
<script>
    (function () {
        var scroll = new LocomotiveScroll();
    })();
</script>

Get the JS file.

Smooth

With smooth scrolling and parallax.

<div data-scroll-container>
    <div data-scroll-section>
        <h1 data-scroll>Hey</h1>
        <p data-scroll>👋</p>
    </div>
    <div data-scroll-section>
        <h2 data-scroll data-scroll-speed="1">What's up?</h2>
        <p data-scroll data-scroll-speed="2">😬</p>
    </div>
</div>

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});

Note: scroll-sections are optional but recommended to improve performance, particularly in long pages.

Advanced

Make it do what you want.

With methods

<section id="js-target">Come here please.</section>

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();
const target = document.querySelector('#js-target');

scroll.scrollTo(target);

With events

<!-- Using modularJS -->
<div data-scroll data-scroll-call="function, module">Trigger</div>
<!-- Using jQuery events -->
<div data-scroll data-scroll-call="EVENT_NAME">Trigger</div>
<!-- Or do it your own way 😎 -->
<div data-scroll data-scroll-call="{y,o,l,o}">Trigger</div>

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

scroll.on('call', func => {
    // Using modularJS
    this.call(...func);
    // Using jQuery events
    $(document).trigger(func);
    // Or do it your own way 😎
});

Instance options

Element attributes

Instance methods

Instance events

Progressive playing animations example (like gsap)

All data-scroll elements have a progress value. In the on scroll event you can get all current in-view elements.

HTML

<h1 data-scroll data-scroll-id="hey">Hey</h1>

JS

scroll.on('scroll', (args) => {
    // Get all current elements : args.currentElements
    if(typeof args.currentElements['hey'] === 'object') {
        let progress = args.currentElements['hey'].progress;
        console.log(progress);
        // ouput log example: 0.34
        // gsap example : myGsapAnimation.progress(progress);
    }
});

Dependencies

Browser support

Works on most modern browsers. Chrome, Firefox, Safari, Edge...

To get IE 11 support, you need polyfills. You can use your own or include these before our script.

<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
<script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script>

Who's using Locomotive Scroll?

• thierrychopain.com
• clmt.paris
• miragefestival.com/2020
• mazellier.design
• ccccontemple.com
• abhishekjha.me/muteza
• normal.studio
• mixlegno.com
• nfq.group
• works.studio
• beangels.eu
• izakaya-caen.fr
• white-elephant.fr
• henge07.com
• loirevalleylodges.com

Related

• Locomotive Boilerplate 🚂

Author: Locomotivemtl
Source Code: https://github.com/locomotivemtl/locomotive-scroll 
License: MIT License

#javascript #parallax

Create Stunning Scrolling Parallax Effects in PowerPoint Presentations

How to Master the Scrolling Parallax Effect in PowerPoint | Free Course

In this PowerPoint design course you will learn how to use the PowerPoint Morph Transition to create stunning Scrolling Parallax Effects in your PowerPoint presentations. This course covers the two most practical Parallax Effects for all kinds of PowerPoint presentations: The Lazy Scroll Parallax and the Sticky Scroll Parallax.
Once you understand the fundamental techniques, you will be able to apply this effect to your own pre-built slides in a matter of minutes. Forget about complicated PowerPoint animations, with PowerPoint Morph (which is available in PowerPoint 365 and 2019) you can create Parallax Effects without any significant effort and, more importantly, without messing up your slides completely. With the correct setup, you can turn the Scrolling Parallax Transition on and off whenever you want and your slides will still be fully usable.

Table of Contents
00:00 Course Outline
02:21 Lazy Scroll Parallax Effect
20:38 Sticky Scroll Parallax Effect

✅ My new PowerPoint Resource Website  ► https://slidefind.com
💎 Best Selection of PowerPoint Templates ► https://slidefind.com/templates
🚀 Best PowerPoint Setup for Professionals ► https://slidefind.com/design-guide/the-perfect-powerpoint-setup-for-professionals/

 Want to make my day? 
Buy me a Coffee ► https://bit.ly/2Oqg6Cu 

Best PowerPoint and Excel Resources 
My PowerPoint Resources ► https://slidefind.com 
My Excel Resources ► http://excelfind.com 

Subscribe: https://www.youtube.com/channel/UCKsfJnvC-HCoEQEEIKZIzQQ/featured 

#powerpoint  #parallax  #morph

How to Animate Parallax Background Images with Divi’s Scroll Effects

Combining scroll effects with parallax background images can create quite a magical design for your visitors. Since the parallax effect already puts the image in motion as the user scrolls down the page, adding additional scroll effects (like horizontal motion and rotation) can really set the design apart and open doors for more creative layouts.

In this tutorial, we are going to walk through how to animate parallax background images using Divi’s scroll effects. We will be using the same background image on multiple text modules to design a unique layout for displaying a short block of text.

#parallax #divi

2.5D Parallax Scrolling Effects using HTML CSS & Javascript

2.5D Parallax Scrolling Effects using HTML CSS & Javascript

💗If you feel good, please subscribe and donate to help us out. Thanks!💗
👻👻Buy Me a Coffee . Thank You ! 💗💗 :
💗💗 https://www.buymeacoffee.com/QK1DkYS
Please subscribe for us. Thanks very much! 😘😘
. Facebook: https://www.facebook.com/votu.thich
Learn html css and javascript project - from beginner to advanced.
Discover the amazing possibilities of html, css and javascript together, creating amazing effects and designs.

Please! Subscribe, Like and follow. Thanks for watching.
Join Our Channel
https://www.youtube.com/channel/UCGRDayozk2qch3vw-qAtQng?view_as=subscriber

Paypal donation link : https://paypal.me/tuananh251192

Link images:
https://i0.wp.com/uphinh.org/images/2020/03/13/img1.jpg
https://i0.wp.com/uphinh.org/images/2020/03/13/img2.png

Music Credit
Track: DEAF KEV - Invincible [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/J2X5mJ3HDYE
Free Download / Stream: http://ncs.io/invincible

#parallax #html #css #javascript

How to Create A Website with HTML & CSS | Responsive + Parallax Effect

In this tutorial we will learn how to create a Responsive Website with HTML & CSS with Parallax effect. All the related source code and resources are available in the below repo.

Enjoy the video guys 🙂

Complete Code Repo - https://github.com/codefreeeze/music-events

Track: CHENDA & Shiah Maisel - Ten More Minutes [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/woNrNfFVsKc
Free Download / Stream: http://ncs.io/TenMoreMinutes

#html #css #parallax

How to Make a Parallax WordPress Website For Beginners

Learn how to create a website in WordPress - step by step in under 2 hours! Perfect for complete beginners or future web developers.

In this free parallax website tutorial, I show you step by step how to make an amazing parallax wordpress website. It uses a Drag n Drop builder allowing anyone to build and complete their websites in a few hours!

Contents

Introduction 0:00
Overview 5:56
Domain & Hosting 7:53
Install WordPress 11:28
Configure Basic Settings 13:52
Install Theme 16:27

Add Pages & Custom Menu Links 19:00
Set Static Home Page 23:09
Configure Themify Settings 24:13
(Layouts/Header/Footer/Easy Google Fonts)
Add Social Links 27:57
Logo/Header/Main Nav/Footer Styling 30:22
10 Tips Everyone Needs to Know 33:22

Build Homepage

Row #1 - Hero Image 43:43
Row #2 - Quote 1:01:20
Row# 3 - About 1:04:00
Row# 4 - Services 1:08:40
Row #5 - Gallery 1:12:48
Row #6 - Video 1:16:10
Row #7 - Blog (Add Blog Posts/Widgets & Styling) 1:19:00
Row # 8 - Contact 1:30:25
Row #9 - Map 1:34:10

Important

Set Sticker Header Styling 1:37:00
Set in Row Anchors (Important) 1:37:44
Make Website “SUPER” Mobile Responsive 1:39:38
Add Additional Pages & Built in Layouts 1:42:41

Translating Themes: https://themify.me/docs/translating

Congrats on building your beautiful WordPress website. Hope you guys have enjoyed it as much as I did! Please give the video a big LIKE if you found it useful, it might be two hours long but it took hundreds of hours to create! :)

Note: This theme is free to download, use (personal or commercial), it is the full version with no limitations. I have permission from themify to share it with you guys and thousands of people have already built their websites since 2015. But if you enjoy it, you have the option to get support/updates for 1 year here: https://hoganchua.com/get/ultrayt and can use: HOGAN for 30% Off! (limited time only!) This option is perfect for web developers working with clients or people who want additional help :) If you have any questions, do not hesitate to drop a comment below!

Cheers

Hogan Chua

#wordpress #parallax

How to Add Triple Parallax, Gradients & Animation! - Advanced (Ultra Theme)

Learn How to Add Triple Parallax, Gradients & Animation Effects. These are some of the Amazing New Features of Ultra by Themify.

Download Theme: https://s3-us-west-2.amazonaws.com/businesstutorial/themify-ultra.zip
How to Update: https://themify.me/docs/upgrading#reinstall

Enjoy,

Hogan Chua

#parallax #gradients #ultra #themify

How to Add an Amazing Dual Parallax - Basic [Ultra Theme]

Learn how to add in an amazing dual parallax effect to your website. You will need to be using Ultra by Themify.

Download Templates: https://s3.amazonaws.com/addontutorials/Parallax+Templates.zip

Enjoy,

Hogan Chua

#themify #parallax #ultra

How To Create a Parallax Scrolling Effect Only HTML & CSS

How To Create a Parallax Scrolling Effect Only HTML & CSS

💗If you feel good, please subscribe and donate to help us out. Thanks!💗
👻👻Buy Me a Coffee . Thank You ! 💗💗 :
💗💗 https://www.buymeacoffee.com/QK1DkYS
Please subscribe for us. Thanks very much! 😘😘
. Facebook: https://www.facebook.com/votu.thich
Discover the amazing possibilities of html, css and javascript together, creating amazing effects and designs.

Please! Subscribe, Like and follow. Thanks for watching.
Join Our Channel
https://www.youtube.com/channel/UCGRDayozk2qch3vw-qAtQng?view_as=subscriber

Paypal donation link : https://paypal.me/tuananh251192

Music Credit
1.Track: Raiko - Revenger [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/Vj_V0RfdTSY
Free Download / Stream: http://ncs.io/Revenger

2.Track: Distrion - Chasing Ghosts (feat. Max Landry) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/qjkDfMM0qao
Free Download / Stream: http://ncs.io/DChasingGhosts

3.Track: Convex - 4U (feat. Jex Jordyn) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/dMnWZ8tAUkU
Free Download / Stream: http://ncs.io/4U

4.Track: Rob Gasser - Hollow (feat. Veronica Bravo) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: https://youtu.be/L14hxW2SN68
Free Download / Stream: http://ncs.io/RGHollow

#parallax #css #html

Parallax Effect using Pure Vanilla JavaScript: Zoom in and Darken Background on Scroll

Hello viewers… In this video, we created a parallax effect on the background which can zoom in and darken the background image as we scroll down. The parallax effect looks pretty cool😎 and there are lots of such effects. But this one is one of the advanced parallax effects. The parallax effect created in this video is done using pure vanilla JavaScript and no plugins. Hope you all will like it.

Image used in the video:- https://images.pexels.com/photos/1144687/pexels-photo-1144687.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260

⌛Timestamps:-

00:00 - Intro
00:35 - Main
04:06 - Outro

📝Source code:-
https://codepen.io/pen/?template=xxEvJzd

This video is a part of the video series in which we are creating projects using pure vanilla JavaScript the link of which is given down below:-

https://youtube.com/playlist?list=PL9PpUEdGHsA3-MdZmi2JSa-Aki-yq0iDm

🌏Find me on:-

Github:- https://github.com/ani-24
CodePen:- https://codepen.io/codeit-ani

Thanks for watching…
If you liked the video, smash the like button, make sure you are subscribed to the channel and press the bell icon to get an instant notification of our latest videos.

#parallax #javascript