Light

codrops / blockrevealers Goto Github PK

View Code? Open in Web Editor NEW

557.0 21.0 91.0 452 KB

Ideas for revealing content in a schematic box look as seen around the Web lately.

Home Page: https://tympanus.net/codrops/?p=29372

CSS 24.43% HTML 65.19% JavaScript 10.37%

blockrevealers's Introduction

Block Reveal Effects

Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.

Article on Codrops

Demo

This demo is sponsored by Hack Reactor: Your CS success starts here

License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Credits

scrollMonitor by Stu Kabakoff
Images from Unsplash.com
Icons by Gregor Cresnar and Flaticon
anime.js by Julian Garnier

Misc

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

blockrevealers's People

Contributors

Stargazers

Watchers

Forkers

mbuffet hypemister chhonmeily oscarsmeulders rolka utkarshbhimte eliements stubben victorcamnerin git2358 redboss1 patrykadas nerisina ayushgw apachesep zeusbaseweb jarc100 satishborkar santoshban sync101 simonepozzobon oliviahannan dazune majlind nrtn-technology h3dc jbwestphal rockyrgibson sadok-aguel lizardking93 stakbuilds hackur darkgreising ripu muhammadaan justmelnyc vikram-rajput bukalov dawnwages l3dlp-sandbox gitsaxe jprittie 0x6d6861 roderickjackson-bradley chasevorn vadimazzz neton kosowwwa wooojek alamehor talhaberer1111 circoambulante sarahsdf robertomalatesta nicker003 axelschelfhout kasuz guardian820 gabiet ctsanders1 hailey0306 seungworks mamunhpath nixks kishorchandth sipostudent cctoni kamwing udhayamgit gauchomatt domnic17 okosamastar onemax-oliver pmejna b-rumble seedcms ddpanda jcamp lurkingdeath sts0mrg0 23creative thodorisk fooork jobinvani mk-special harsh-dhillon searchgpt zubairamin aryabeth eugenezheleznov dhavalnerds97

blockrevealers's Issues

Menu issue in Edge

No error messages, content is loaded, just doesn't reveal the items, all you see is the background.

How to do reverse effect?

How to do reverse effect? Something like: hiddeRevearseFx.
Hiding the unit with the help of animation.

Issue when scrolling

Hello! I'm having problems with the "on scroll" animation. I get this error on JavaScript console:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at RevealFx._layout (main.js:80)
at RevealFx._init (main.js:73)
at new RevealFx (main.js:39)

Any ideas?

Not working with gravity form ajax

Default ajax is working but not showing gravity form responses inside the popup..

Sticky Menu

I've been struggling with being able to get the menu icon to scroll with the rest of the page. When I'm able to do it, the icon becomes unclickable. I've tried position: fixed on basically every element that would possibly make it work (even a ton of combinations). Has anyone successfully made it work?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.