Skip to content

Instantly share code, notes, and snippets.

View senormedia's full-sized avatar

Marcos Acosta senormedia

2 followers · 1 following
View GitHub Profile
@senormedia
senormedia / eslint-vscode-airbnb.md
Created February 27, 2020 19:22 — forked from raftheunis87/eslint-vscode-airbnb.md
Setting up ESLint on VS Code with Airbnb JavaScript Style Guide
  1. cd coding-directory
  2. npm init -y
  3. npm install --save-dev --save-exact eslint eslint-config-airbnb-base eslint-plugin-import
  4. Create .eslintrc file with following content:
{
  "extends": "airbnb-base",
  "env": {
    "browser": true,
 "node": true
@senormedia
senormedia / SSLXampp.md
Created January 27, 2019 23:53 — forked from nguyenanhtu/SSLXampp.md
Guide to configure SSL in XAMPP for Windows

How to test 'https' in XAMPP for localhost ? I will guide you

Menu

  • Create certificate
  • Config Apache to access https instead of http
  • Config mod rewrite to generate SSL url
  • Config Virtual host to test site

Step 1 : Create certificate

  • Go to your XAMPP installation directory (in my case it’s E:\xampp), figure out apache folder. In this, find & run batch file
@senormedia
senormedia / index.html
Created January 7, 2019 12:01
Slide element left/right on scroll
<section>
<div class="animation-element slide-left">
<h2>Sliding left</h2>
</div>
<div class="animation-element slide-right">
<h2>Sliding right</h2>
</div>
<div class="animation-element slide-left">
<h2>Sliding left</h2>
@senormedia
senormedia / index.html
Created January 7, 2019 11:56
One page scroll with depth effect (?)
<div class="scene">
<div class="page page-1 active">
<div class="half left"></div>
<div class="half right withText">
<h2 class="heading">Page 1</h2>
</div>
</div>
<div class="page page-2">
<div class="half left withText">
<h2 class="heading">Page 2</h2>
@senormedia
senormedia / demos-showcase.markdown
Created January 7, 2019 11:54
Demos Showcase

Demos Showcase

Source of inspiration - http://www.ginventory.co/

DESKTOP ONLY. Full-HD is ideal.

Originally I did only rotating yellow block animation. But then I found out that this concept looks useless without some object in the middle of screen. So I decided to put other demos inside this phone mockup! This is a reason why I'm using sort of preloader (with static animation time), to prevent some major lags on start, when 5 iframes are loading (but still, if you have slow internet or pc, this demo can be painful for you).

Right now rotater not working in IE, probably some "calc" problems, will try to fix it later. No idea how this works in Safari.

@senormedia
senormedia / hexagon-circle-panel-transition.markdown
Created January 7, 2019 11:53
Hexagon Circle Panel Transition
@senormedia
senormedia / index.slim
Created January 7, 2019 11:52
Uber-like text transitions
#fullpage
.section.one
h1 Here's a great
h2 tagline to read
.section.two
h1 Oh look, another phrase
h2 to stand out
.section.three
h1 Finally, this is the
h2 last slide
@senormedia
senormedia / index.html
Created January 7, 2019 11:42
Pagination & layout with clipped background div's
<div class="scene">
<div class="img-cont left cont-1" data-helper="0" data-blocks="1"></div>
<div class="img-cont right cont-1" data-helper="0" data-blocks="1"></div>
<div class="content cont-1">
<h2 class="title">Page 1 Content</h2>
<p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
<span class="close">+</span>
</div>
<div class="img-cont left cont-2" data-helper="-1" data-blocks="2"></div>
<div class="img-cont right cont-2" data-helper="1" data-blocks="2"></div>
@senormedia
senormedia / exploring-ui-animation-1.markdown
Created January 7, 2019 08:59
Exploring UI Animation #1

Exploring UI Animation #1

Exploring a slider concept designed by @ErnestAsanov and by the awesome team at Tubik Studio.

A Pen by mario s maselli on CodePen.

License.

@senormedia
senormedia / index.pug
Created January 7, 2019 08:58
Popout Slider
.slider
.slider__slide.slider__slide--active( data-slide="1" )
.slider__wrap
.slider__back
.slider__inner
.slider__content
h1 Slide <br> One
a.go-to-next next
.slider__slide( data-slide="2" )
.slider__wrap