JavaScript Dev

JavaScript Dev

1602836640

Detection of elements in viewport & smooth scrolling with parallax

Description:

locomotive-scroll is a modern JS library that applies a smooth, subtle, configurable parallax scroll effect to elements when scrolled into view.

More features:

  • Custom trigger offset.
  • Smooth scroll.
  • Touch-enabled.
  • Custom scrollbar.
  • Supports sticky element.
  • Vertical or horizontal directions.

How to use it:

1. Install the package and import the LocomotiveScroll module.

## NPM
$ npm install locomotive-scroll --save
import LocomotiveScroll from 'locomotive-scroll';

2. Or load the necessary JavaScript & CSS files from the dist folder.

<script src="dist/locomotive-scroll.min.js"></script>
<link href="dist/locomotive-scroll.min.css" rel="stylesheet" />

3. Initialize the LocomotiveScroll with default settings.

const myScroll = new LocomotiveScroll();

4. Apply the LocomotiveScroll to target elements using the data-scroll attribute:

<div data-scroll>Element To Animate</div>

5. Config the parallax scroll effect with the following data attributes:

  • data-scroll-container: scroll container
  • data-scroll-section: Scrollable section. Useful for sectioned pages
  • data-scroll-class: in-view class
  • data-scroll-offset: Trigger offset (ex.: “10”, “100,50%”, “25%, 15%”)
  • data-scroll-repeat: Repeat the viewport detection
  • data-scroll-call: Execute a call function here
  • data-scroll-speed: Parallax speed
  • data-scroll-target: Target element
  • data-scroll-position: top or bottom
  • data-scroll-direction: vertical or horizontal
  • data-scroll-delay: Parallax delay
  • data-scroll-sticky: Sticky element
<div data-scroll
     data-scroll-speed="1">
     data-scroll-call="EVENT_NAME"
     >
     Element To Animate
</div>

6. All possible settings to config the library.

const myScroll = new LocomotiveScroll({
      el: document,
      elMobile: document,
      name: 'scroll',
      offset: [0, 0],
      repeat: false,
      smooth: false, // smooth scroll
      smoothMobile: false, // smooth scroll on mobile
      direction: 'vertical', // or horizontal
      lerp: 1, // inertia
      class: 'is-inview',
      scrollbarClass: 'c-scrollbar',
      scrollingClass: 'has-scroll-scrolling',
      draggingClass: 'has-scroll-dragging',
      smoothClass: 'has-scroll-smooth',
      initClass: 'has-scroll-init',
      getSpeed: false,
      getDirection: false,
      multiplier: 1,
      firefoxMultiplier: 50,
      touchMultiplier: 2,
      scrollFromAnywhere: false
});

7. API methods.

// initialize the instance
myScroll.init();

// re-calc & update the postion
myScroll.update();

// destroy 
myScroll.destroy();

// restart
myScroll.start();

// stop
myScroll.stop();

// scroll to a specific element with an offset
myScroll.scrollTo(target, offset);

8. Event handlers.

myScroll.on('call', (func) => {
  // do something
});

myScroll.on('scroll', (obj) => {
  // do something
});

Download Details:

Author: locomotivemtl

Source Code: https://github.com/locomotivemtl/locomotive-scroll

#javascript

What is GEEK

Buddha Community

Detection of elements in viewport & smooth scrolling with parallax
Enos  Prosacco

Enos Prosacco

1591277160

The Easiest Way To Create Parallax Scrolling With simpleParallax

The Easiest Way 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

#javascript #parallax scrolling #parallax #programming #simpleparallax

JavaScript Dev

JavaScript Dev

1602836640

Detection of elements in viewport & smooth scrolling with parallax

Description:

locomotive-scroll is a modern JS library that applies a smooth, subtle, configurable parallax scroll effect to elements when scrolled into view.

More features:

  • Custom trigger offset.
  • Smooth scroll.
  • Touch-enabled.
  • Custom scrollbar.
  • Supports sticky element.
  • Vertical or horizontal directions.

How to use it:

1. Install the package and import the LocomotiveScroll module.

## NPM
$ npm install locomotive-scroll --save
import LocomotiveScroll from 'locomotive-scroll';

2. Or load the necessary JavaScript & CSS files from the dist folder.

<script src="dist/locomotive-scroll.min.js"></script>
<link href="dist/locomotive-scroll.min.css" rel="stylesheet" />

3. Initialize the LocomotiveScroll with default settings.

const myScroll = new LocomotiveScroll();

4. Apply the LocomotiveScroll to target elements using the data-scroll attribute:

<div data-scroll>Element To Animate</div>

5. Config the parallax scroll effect with the following data attributes:

  • data-scroll-container: scroll container
  • data-scroll-section: Scrollable section. Useful for sectioned pages
  • data-scroll-class: in-view class
  • data-scroll-offset: Trigger offset (ex.: “10”, “100,50%”, “25%, 15%”)
  • data-scroll-repeat: Repeat the viewport detection
  • data-scroll-call: Execute a call function here
  • data-scroll-speed: Parallax speed
  • data-scroll-target: Target element
  • data-scroll-position: top or bottom
  • data-scroll-direction: vertical or horizontal
  • data-scroll-delay: Parallax delay
  • data-scroll-sticky: Sticky element
<div data-scroll
     data-scroll-speed="1">
     data-scroll-call="EVENT_NAME"
     >
     Element To Animate
</div>

6. All possible settings to config the library.

const myScroll = new LocomotiveScroll({
      el: document,
      elMobile: document,
      name: 'scroll',
      offset: [0, 0],
      repeat: false,
      smooth: false, // smooth scroll
      smoothMobile: false, // smooth scroll on mobile
      direction: 'vertical', // or horizontal
      lerp: 1, // inertia
      class: 'is-inview',
      scrollbarClass: 'c-scrollbar',
      scrollingClass: 'has-scroll-scrolling',
      draggingClass: 'has-scroll-dragging',
      smoothClass: 'has-scroll-smooth',
      initClass: 'has-scroll-init',
      getSpeed: false,
      getDirection: false,
      multiplier: 1,
      firefoxMultiplier: 50,
      touchMultiplier: 2,
      scrollFromAnywhere: false
});

7. API methods.

// initialize the instance
myScroll.init();

// re-calc & update the postion
myScroll.update();

// destroy 
myScroll.destroy();

// restart
myScroll.start();

// stop
myScroll.stop();

// scroll to a specific element with an offset
myScroll.scrollTo(target, offset);

8. Event handlers.

myScroll.on('call', (func) => {
  // do something
});

myScroll.on('scroll', (obj) => {
  // do something
});

Download Details:

Author: locomotivemtl

Source Code: https://github.com/locomotivemtl/locomotive-scroll

#javascript

Chando Dhar

Chando Dhar

1619799996

Deep Learning Project : Real Time Object Detection in Python & Opencv

Real Time Object Detection in Python And OpenCV

Github Link: https://github.com/Chando0185/Object_Detection

Blog Link: https://knowledgedoctor37.blogspot.com/#

I’m on Instagram as @knowledge_doctor.

Follow Me On Instagram :
https://www.instagram.com/invites/contact/?i=f9n3ongbu8ma&utm_content=jresydt

Like My Facebook Page:

https://www.facebook.com/Knowledge-Doctor-Programming-114082097010409/

#python project #object detection #python opencv #opencv object detection #object detection in python #python opencv for object detection

Marquis  Haag

Marquis Haag

1625227560

flutter parallax effect part 02

In this tutorial, I’ll be covering how to create a smooth flutter parallax effect in a very easy way.

assets folder - https://drive.google.com/drive/folder

flutter custom switch animations - https://www.youtube.com/watch?v=ZRTKl

used plugins - flutter_svg: ^0.22.0

To support me - Subscribe to my channel.
https://www.youtube.com/channel/UC6Yn

inspiration and assets from - https://www.freepik.com/free-vector/t

Feel free to ask any question
Welcome any suggestion

Enjoy.

#flutter parallax effect #flutter parallax #parallax

Wanda  Huel

Wanda Huel

1601280960

Statistical techniques for anomaly detection

Anomaly and fraud detection is a multi-billion-dollar industry. According to a Nilson Report, the amount of global credit card fraud alone was USD 7.6 billion in 2010. In the UK fraudulent credit card transaction losses were estimated at more than USD 1 billion in 2018. To counter these kinds of financial losses a huge amount of resources are employed to identify frauds and anomalies in every single industry.

In data science, “Outlier”, “Anomaly” and “Fraud” are often synonymously used, but there are subtle differences. An “outliers’ generally refers to a data point that somehow stands out from the rest of the crowd. However, when this outlier is completely unexpected and unexplained, it becomes an anomaly. That is to say, all anomalies are outliers but not necessarily all outliers are anomalies. In this article, however, I am using these terms interchangeably.

There are numerous reasons why understanding and detecting outliers are important. As a data scientist when we make data preparation we take great care in understanding if there is any data point unexplained, which may have entered erroneously. Sometimes we filter completely legitimate outlier data points and remove them to ensure greater model performance.

There is also a huge industrial application of anomaly detection. Credit card fraud detection is the most cited one but in numerous other cases anomaly detection is an essential part of doing business such as detecting network intrusion, identifying instrument failure, detecting tumor cells etc.

A range of tools and techniques are used to detect outliers and anomalies, from simple statistical techniques to complex machine learning algorithms, depending on the complexity of data and sophistication needed. The purpose of this article is to summarise some simple yet powerful statistical techniques that can be readily used for initial screening of outliers. While complex algorithms can be inevitable to use, sometimes simple techniques are more than enough to serve the purpose.

Below is a primer on five statistical techniques.

#anomaly-detection #machine-learning #outlier-detection #data-science #fraud-detection