Nitesh Khatri khatrinitesh

Animate on scroll with wow.js

Reveal Animations When You Scroll

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Attributes vs Properties</title>
	<style>
	* {
	box-sizing: border-box;

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Media Query Ranges</title>
	<link rel="stylesheet" href="./main.css" />
	</head>
	<body>

	document.addEventListener('DOMContentLoaded', () => {
	document.getElementById('inputFile').addEventListener('change', filesPicked);

	// document.getElementById('btnToggle').addEventListener('click', toggleInput);
	// document.getElementById('btnPick').addEventListener('click', askForFiles);
	// document.getElementById('btnInfo').addEventListener('click', showFileInfo);
	});

	function filesPicked(ev) {
	//any time one or more files are picked in the file picker dialog

	import React, { useState, useEffect } from "react";

	import Posts from "./Posts";
	import posts from "./postsArray";
	const postsPerPage = 3;
	let arrayForHoldingPosts = [];

	const App = () => {
	const [postsToShow, setPostsToShow] = useState([]);
	const [next, setNext] = useState(3);

	$(".scroll-next").click(function() {
	var cls = $(this).closest(".section").next().offset().top;
	$("html, body").animate({scrollTop: cls}, "slow");
	});

	<div id="content-carousel" class="content-carousel-widget" data-carousel="swiper">
	<!--
	You can use: data-items="5" for total items display in single page
	data-autoplay="true" or "false" for autoplay.
	data-loop="true" or "false" for looping the carousel
	data-effect="fade" or "cube" for slide changing effects
	data-direction="horizontal" or "vertical" for sliding direction
	data-initlal="3" for for first active slide
	data-center="true" or "false" for centerize slider
	-->

	/*
	Based on:
	1. http://stephen.io/mediaqueries
	2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
	*/

	/* iPhone X in portrait & landscape */
	@media only screen
	and (min-device-width : 375px)
	and (max-device-width : 812px)