WBDSGNR - Real Life Implement: September 2017

Friday, 29 September 2017

Monday, 25 September 2017

DIVI MESSAGE PATTERN

NEW INQUIRY COMING FROM..

name : %%name%%
phone : %%phone%%.
Email: %%email%%.
Message : " %%message%% ".

Monday, 18 September 2017

.et_fullscreen_slider

PASTE ON <HEAD>

<script>
(function($) {
$(window).on('load resize', function() {
$('.et_fullscreen_slider').each(function() {
et_fullscreen_slider($(this));
});
});
function et_fullscreen_slider(et_slider) {
var et_viewport_height = $(window).height(),
et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
$admin_bar = $('#wpadminbar'),
$main_header = $('#main-header'),
$top_header = $('#top-header');
$(et_slider).height('auto');
if ($admin_bar.length) {
var et_viewport_height = et_viewport_height - $admin_bar.height();
}
if ($top_header.length) {
var et_viewport_height = et_viewport_height - $top_header.height();
}
if (!$('.et_transparent_nav').length && !$('.et_vertical_nav').length) {
var et_viewport_height = et_viewport_height - $main_header.height();
}
if (et_viewport_height > et_slider_height) {
$(et_slider).height(et_viewport_height);
}
}
})(jQuery);
</script>

REF : CSS3 HOVER EFFECT

https://codepen.io/search/pens/?limit=all&page=3&q=hover+effect

REF : HTML5 CANVAS

http://www.html5canvastutorials.com/
http://creativejs.com/2011/08/31-days-of-canvas-tutorials/
http://www.bit-101.com/
http://scrollmagic.io/
http://creativejs.com/2011/08/31-days-of-canvas-tutorials/

Saturday, 16 September 2017

CREATE A LINK/URL THAT EXPIRED AND SECRET

https://onetimesecret.com/

TRIGGER ANIMATION WHEN SCROLL UP/DOWN

Past the code on <body> for divi/html

<script>
(function($) {
var $animation_elements = $('.et-waypoint'),
$window = $(window);

function check_if_in_view() {
var window_height = $window.height(),
window_top_position = $window.scrollTop(),
window_bottom_position = (window_top_position + window_height);

$animation_elements.each(function() {
var $element = $(this),
element_height = $element.outerHeight(),
element_top_position = $element.offset().top,
element_bottom_position = (element_top_position + element_height);

//check to see if this element is within viewport
if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
$element.addClass('et-animated');
} else {
$element.removeClass('et-animated');
}
});
}

$window.on('scroll resize', check_if_in_view);
})(jQuery);
</script>

Friday, 15 September 2017

CSS ANIMATION REFERENCE

http://www.justinaguilar.com/animations/#

CSS : IMAGE / TEXT FLOATING / SCALING

.floating{
/*float: left; */
display: inline-block; /* to make image center */
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;

}

@-webkit-keyframes Floatingx{
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px); }
}

@-moz-keyframes Floating{
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}

.scaling{
/* float: left; */
display: inline-block; /* to make image center */
-webkit-animation-name: scalex;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-name: scale;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease-in-out;
}

@-webkit-keyframes scalex{
from {-webkit-transform: scale(0.9);}
65% {-webkit-transform: scale(1.0);}
to {-webkit-transform: scale(0.9);}
}

@-moz-keyframes scale{
from {-moz-transform: scale(0.9);}
65% {-moz-transform: scale(1.0);}
to {-moz-transform: scale(0.9);}
}

Thursday, 14 September 2017

DlVl CSS KEN BURN EFFECT

Css ni buat slider atau image bergerak. untuk DlVl. Header atau slider.

ref : https://www.elegantthemes.com/blog/divi-resources/ken-burns-effect-divi

.kb-zoomout .et_pb_slide .et_parallax_bg {
animation: zoomout 7s forwards;
-ms-animation: zoomout 7s forwards;
-webkit-animation: zoomout 7s forwards;
-0-animation: zoomout 7s forwards;
-moz-animation: zoomout 7s forwards;

}

.kb-zoomin .et_pb_slide .et_parallax_bg {
animation: zoomin 7s forwards;
-ms-animation: zoomin 7s forwards;
-webkit-animation: zoomin 7s forwards;
-0-animation: zoomin 7s forwards;
-moz-animation: zoomin 7s forwards;

}

.kb-zoomin-right .et_pb_slide .et_parallax_bg {
animation: zoomin-right 7s forwards;
-ms-animation: zoomin-right 7s forwards;
-webkit-animation: zoomin-right 7s forwards;
-0-animation: zoomin-right 7s forwards;
-moz-animation: zoomin-right 7s forwards;

}

.kb-zoomout-right .et_pb_slide .et_parallax_bg {
animation: zoomout-right 7s forwards;
-ms-animation: zoomout-right 7s forwards;
-webkit-animation: zoomout-right 7s forwards;
-0-animation: zoomout-right 7s forwards;
-moz-animation: zoomout-right 7s forwards;

}

.kb-zoomout .et_parallax_bg {
animation: zoomout 17s forwards;
-ms-animation: zoomout 17s forwards;
-webkit-animation: zoomout 17s forwards;
-0-animation: zoomout 17s forwards;
-moz-animation: zoomout 17s forwards;

}

.kb-zoomin .et_parallax_bg {
animation: zoomin 17s forwards;
-ms-animation: zoomin 17s forwards;
-webkit-animation: zoomin 17s forwards;
-0-animation: zoomin 17s forwards;
-moz-animation: zoomin 17s forwards;

}

.kb-zoomin-right .et_parallax_bg {
animation: zoomin-right 7s forwards;
-ms-animation: zoomin-right 17s forwards;
-webkit-animation: zoomin-right 17s forwards;
-0-animation: zoomin-right 17s forwards;
-moz-animation: zoomin-right 17s forwards;

}

.kb-zoomout-right .et_parallax_bg {
animation: zoomout-right 7s forwards;
-ms-animation: zoomout-right 17s forwards;
-webkit-animation: zoomout-right 17s forwards;
-0-animation: zoomout-right 17s forwards;
-moz-animation: zoomout-right 17s forwards;

}

@keyframes zoomout{
0% {
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}

100% {
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin{
0%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
animation-timing-function: linear;

}

100%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
-webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomout-right{
0%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
animation-timing-function: linear;
}

100%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin-right{
0%{
-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
-moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
animation-timing-function: linear;
}

100%{
-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
-moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);

}
}

CSS Image zoom on hover

.image-zoom img {
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
}

.image-zoom img:hover{
transform:scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform:scale(1.1);
}

.image-zoom-constrained {
overflow:hidden;
}

Refer : http://www.twobluetoucans.co.uk/divi/image-hover-zoom-effect-divi/

/* -------- Media equiry ------------------*/

/* above 1400 the default sizes are used */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
/* tablets and desktop */
.image-zoom {
max-width:400px !important;
}
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
/* tablets and desktop */
.image-zoom {
max-width:220px !important;
}
}
@media only screen and (min-width: 980px) and (max-width: 1099px) {
/* tablets and desktop */
.image-zoom {
max-width:200px !important;
}
}
/* below 980 Divi takes moves to a single column layout */
@media only screen and (max-width: 979px) {
/* landscape phones */
}
@media only screen and (max-width: 979px) and (orientation: portrait) {
/* portrait phones */
}

----------------------------------- script ---------------------------------

$(window).scroll(function() {
var scroll = $(window).scrollTop();
$(".zoom img").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
//Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
//"-webkit-filter": "blur(" + (scroll/200) + "px)",
//filter: "blur(" + (scroll/200) + "px)"
});
});

Wednesday, 13 September 2017

Video without player button auto play & loop

<video autoplay="autoplay" id="video" preload="preload" width="800" height="480">
<source src="video/t12.webm" type="video/webm"></source>
<source src="http://nucleus.fanatikapps.com/wp-content/uploads/2017/09/Sequence-02_1.mp4" type="video/mp4" height="42" width="42"></source>
</video>

Autoplay Video Youtube

Animate Product Presentation Wordpress

Nak buat produk animasi. Gunalah Animate It.
https://wordpress.org/plugins/animate-it/

Tuesday, 12 September 2017

Add font-awesome on header

Tampal link bawah ni kat bahagian <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Friday, 8 September 2017

Woocommerce button shortcode without price

There are 2 method to bypass the woocommerce button.

1. Shortcode

[add_to_cart id="812" show_price="false"]

2. Use this url ( change the url.com to your url) then add it to your button

http://url.com/?add-to-cart=357

Plugin need to be install if you are using woocommerce to by pass the add to cart. Follow the setting images bellow

WooCommerce Direct Checkout

Thursday, 7 September 2017

Wordpress dan buddypress geledah

Disable admin bar yang ada log in untuk visitor https://dfactory.eu/wp-how-to-remove-disable-admin-bar/

/* Plugin yang aku gunakan untuk setup media sosial guna wordpress dan buddypress */

Activity Reactions For Buddypress
Admin Custom Login - Customize Your WordPress Login Screen Amazingly
AG Custom Admin
All-in-One WP Migration
BP Redirect To Profile
BuddyPress
BuddyPress Activity Autoloader
BuddyPress Activity Plus
BuddyPress Activity ShortCode
BuddyPress Activity Social Share
BuddyPress Cover Photo
BuddyPress Notifications Widget
Divi Builder
G1 Socials
Hide/Unhide Menu for Guest/Member
LH Private BuddyPress
MailChimp for WordPress
Menu Icons
rtMedia for WordPress, BuddyPress and bbPress
Simple Custom CSS
Snax
Three Column Screen Layout
Transcoder
Widget Options Phpbits Creative Studio
Yoast SEO

WBDSGNR - Real Life Implement