Skip to content

Instantly share code, notes, and snippets.

View hefhuman's full-sized avatar

Vincent Villaluna hefhuman

View GitHub Profile
SLACK GREET
GIT PULL ORIGIN MASTER --rebase
GIT checkout -b nameofbranch
CREATE BRANCH: git checkout -b "vince/ATWIKI-#_TASK_OBJECTIVE"
fresh inside the app folder
$('.btm1_parallax').css('top', ((window.pageYOffset / 2.2) - 750) + 'px');
if (sessionStorage.getItem('advertOnce') == null) {
$('.modal_con').css('display', 'block');
sessionStorage.setItem('advertOnce', 'true');
}
// more details on https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_storage_getitem_session
<ul>
<li></li>
</ul>
<style>
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
body {
background:
url(sweettexture.jpg) /* image */
top center / 200px 200px /* position / size */
no-repeat /* repeat */
fixed /* attachment */
padding-box /* origin */
content-box /* clip */
red; /* color */
}
@hefhuman
hefhuman / responsive-video-iframe.html
Last active April 17, 2019 06:16
add image to relative parent with the size of your desire;position the image with relative with z-index of 0 and width:100%;heightauto; ;then your iframe with position absolute;with top:0;left:0;z-index:1;width:100%;height:100%;
<!--THE EFFECTIVE WAY IS ON THE BOTTOM-->
<div class="container">
<figure><img src="<?php bloginfo('template_url'); ?>/images/mid_img1.jpg" alt="dummy youtube video with company logo"></figure>
<iframe src="https://player.vimeo.com/video/279335650" allowfullscreen></iframe>
</div>
<!--The height will depends on the image that why it will be responsive;-->
<style>
.middle_con1 .container iframe{width: 100%;height: 100%;top:0;left:0;position: absolute;z-index: 1;}
.middle_con1 .container figure{position: relative;z-index: 0;}
<!--to check offset-->
<span class="scrolls"></span>
<div class="btm_plax_holder">
<div id="bottom2">
<div class="wrapper">
<div class="btm2_con">
<?php dynamic_sidebar('btm2_box1'); ?>
</div>
</div>
@hefhuman
hefhuman / parallax.html
Created January 6, 2019 03:09
remember to add jquery on this
<div class="slider">
<div class="plax">
<div class="box_skitter box_skitter_large" style="left: 0; top: -170px; width: 1920px; height: 981px; z-index: 0;">
<div id="content">
<ul>
<li><figure><img src="<?php bloginfo('template_url'); ?>/images/slider/1.jpg" alt=""/></figure></li>
<li><figure><img src="<?php bloginfo('template_url'); ?>/images/slider/2.jpg" alt=""/></figure></li>
<li><figure><img src="<?php bloginfo('template_url'); ?>/images/slider/3.jpg" alt=""/></figure></li>
</ul>
</div>
<div class="justifier">
<div class="content_box">
<h2>MISSION</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum dolorem et voluptatem necessitatibus asperiores dolore cumque, perferendis, nesciunt hic temporibus natus molestias eaque placeat dolor, vel atque. Quis, perferendis praesentium!
</div>
<div class="content_box">
<h2>MISSION</h2>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum dolorem et voluptatem necessitatibus asperiores dolore cumque, perferendis, nesciunt hic temporibus natus molestias eaque placeat dolor, vel atque. Quis, perferendis praesentium!
</div>
</div>