Php Tutorials: 2025

29 January 2025

How to create multi step form with validations?

Create multi step form with validations

<!DOCTYPE html>

<head>

<title>Multi-Step Form with Parsley.js Validation</title>

<style>

.form-section {

padding-left: 15px;

border-left: 2px solid #FF851B;

display: none;

}

.form-section.current {

display: inherit;

}

.btn-info, .btn-default {

margin-top: 10px;

}

html.codepen body {

margin: 1em;

}

</style>

</head>

<body>

<label for="firstname">First Name:</label>

</div>

<label for="email">11Email11:</label>

</div>

<label for="email">Email:</label>

</div>

<label for="color">Favorite color:</label>

</div>

</div>

</form>

</div>

$(function () {

var $sections = $('.form-section');

function navigateTo(index) {

// Mark the current section with the class 'current'

$sections

.removeClass('current')

.eq(index)

.addClass('current');

// Show only the navigation buttons that make sense for the current section:

$('.form-navigation .previous').toggle(index > 0);

var atTheEnd = index >= $sections.length - 1;

$('.form-navigation .next').toggle(!atTheEnd);

$('.form-navigation [type=submit]').toggle(atTheEnd);

}

function curIndex() {

// Return the current index by looking at which section has the class 'current'

return $sections.index($sections.filter('.current'));

}

// Previous button is easy, just go back

$('.form-navigation .previous').click(function() {

navigateTo(curIndex() - 1);

});

// Next button goes forward iff current block validates

$('.form-navigation .next').click(function() {

if ($('.demo-form').parsley().validate({group: 'block-' + curIndex()}))

navigateTo(curIndex() + 1);

});

// Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.

$sections.each(function(index, section) {

$(section).find(':input').attr('data-parsley-group', 'block-' + index);

});

navigateTo(0); // Start at the beginning

});

</script>

</body>

</html>

How to add google auto search places and change date picker format in elementor's input?

Add google auto search places and change date picker format in elementor's input

add_action('wp_footer',function(){

jQuery(document).ready(function($) {

$('input[name="form_fields[field_0b486bd]"], input[name="form_fields[field_ffb1494]"]').each(function() {

var input = this;

if (typeof google !== 'undefined') {

var autocomplete = new google.maps.places.Autocomplete(input, {

componentRestrictions: { country: 'ca' },

types: ['geocode']

});

google.maps.event.addListener(autocomplete, 'place_changed', function() {

var place = autocomplete.getPlace();

if (place.geometry) {

console.log("Selected place: ", place);

} else {

console.log("Place not found");

}

});

}

});

jQuery(document).ready(function($){

setTimeout(function() {

flatpickr(".flatpickr-input", {

minDate: "today",

dateFormat: "Y-m-d",

});

}, 1000);

});

</script>

<?php

});

How to create section Showcase/Scale animation in viewport with Scrollmagic?

Section Showcase/Scale animation in viewport with Scrollmagic

add_action("wp_head", function () {

document.addEventListener("DOMContentLoaded", function() {

var controller = new ScrollMagic.Controller();

var targetElement = document.querySelector("#animate2");

var bodyElement = document.querySelector("body");

var triggerElement1 = document.querySelector("#trigger3");

var triggerElement2 = document.querySelector("#trigger4");

if (targetElement && triggerElement1 && triggerElement2) {

var screenWidth = screen.width;

var screenHeight = screen.height;

console.log("Screen resolution: " + screenWidth + "x" + screenHeight);

var scene2 = new ScrollMagic.Scene({

triggerElement: "#trigger3",

triggerHook: 0.5,

duration: screenHeight,

})

.on("progress", function(e) {

var progressHeight = e.progress * screenHeight;

targetElement.style.height = progressHeight + "px";

})

.setTween(

gsap.to(targetElement, {

backgroundColor: "green",

ease: "power1.out",

})

)

.addTo(controller);

var animationPlaying = false;

triggerElement2.addEventListener("click", function() {

if (animationPlaying) {

scene.reverse();

resetAnimation(targetElement);

animationPlaying = false;

}

});

scene.on("start", function() {

animationPlaying = true;

});

scene.on("end", function() {

animationPlaying = false;

resetAnimation(targetElement);

});

} else {

console.error("Elements #animate1, #trigger1 or #trigger2 not found!");

}

function resetAnimation(element) {

element.style.backgroundColor = "";

element.style.transform = "";

}

});

</script>

<?php

});

/*---------------------CSS---------------------------*/

.home {

position: relative;

}

body::after {

background: #fff5f9c9;

width: 100%;

height: 100%;

content: "";

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

z-index: 9999;

transition: 0.5s all;

opacity: 0;

pointer-events: none;

}

.activeOverlay::after{

opacity: 1;

pointer-events: unset;

}

#animate1{

transition: 0.5s all;

z-index: 999999;

}

.activeScaleAnimation {

transition: 0.5s all;

transform: scale(1.2);

}

How to create bubble scale animation with Scrollmagic?

Create bubble scale animation with Scrollmagic

add_action("wp_head", function () {

document.addEventListener("DOMContentLoaded", function() {

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({

triggerElement: "#bubbleTrigger1"

})

.setClassToggle(".bubbleAnimate", "activebubble")

.addTo(controller);

});

</script>

<?php

});

/*---------------------CSS---------------------------*/

.bubbleAnimate {

position: relative;

overflow: hidden !important;

}

.bubbleAnimate::after {

width: 30px;

height: 30px;

z-index: -2;

content: "";

background: #FFF5F9;

position: absolute;

top: -15px;

left: 0;

right: 0;

border-radius: 200%;

margin: auto;

transition: 0.9s all;

}

.activebubble::after{

transform: scale(100);

}

How to create section progress bar with Scrollmagic?

Create section progress bar with Scrollmagic

add_action("wp_head", function () {

document.addEventListener("DOMContentLoaded", function() {

var controller = new ScrollMagic.Controller();

var targetElement = document.querySelector("#animate1");

var bodyElement = document.querySelector("body");

var triggerElement1 = document.querySelector("#trigger1");

var triggerElement2 = document.querySelector("#trigger2");

if (targetElement && triggerElement1 && triggerElement2) {

var scene1 = new ScrollMagic.Scene({

triggerElement: triggerElement1,

triggerHook: 0.2,

duration: 800

})

.setClassToggle(bodyElement, 'activeOverlay')

.addTo(controller);

var scene2 = new ScrollMagic.Scene({

triggerElement: triggerElement1,

triggerHook: 0.2,

duration: 800

})

.setClassToggle(targetElement, 'activeScaleAnimation')

.addTo(controller);

var animationPlaying = false;

triggerElement2.addEventListener("click", function() {

if (animationPlaying) {

scene.reverse();

resetAnimation(targetElement);

animationPlaying = false;

}

});

scene.on("start", function() {

animationPlaying = true;

});

scene.on("end", function() {

animationPlaying = false;

resetAnimation(targetElement);

});

} else {

console.error("Elements #animate1, #trigger1 or #trigger2 not found!");

}

function resetAnimation(element) {

element.style.backgroundColor = "";

element.style.transform = "";

}

});

</script>

<?php

});

/*---------------------CSS---------------------------*/

#animate2 {

background: #ffe9f2 !important;

width: 3px;

height: 0px;

position: absolute;

top: -21px;

left: 0;

right: 0;

margin: auto;

z-index: 0;

}

.scrollBarSection{

position: relative;

}

How to create CSS Animation?

Create CSS Animation

/*-------zoom out and in Animation----*/

@keyframes animation-5 {

0% {

transform: scale(1);

}

100% {

transform: scale(1.1);

}

.aniamtion-key-5 {

position: relative;

animation-name: animation-5;

animation-duration: 1.5s;

animation-iteration-count: infinite;

animation-direction: alternate;

transition: all 0.4s ease-in-out;

}

/*-------Left to right Animation----*/

@keyframes animation-2 {

0% {

transform: translateX(0);

}

100% {

transform: translateX(50px);

}

.aniamtion-key-2 {

position: relative;

animation-name: animation-2;

animation-duration: 2.5s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

/*-------Top to bottom Animation----*/

@keyframes animation-1 {

0% {

transform: translateY(0);

}

100% {

transform: translateY(30px);

}

.aniamtion-key-1 {

position: relative;

animation-name: animation-1;

animation-duration: 3s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

/*-------Rotating Animation----*/

@keyframes animation-7 {

0% {

transform: rotate(0);

}

100% {

transform: rotate(-1000deg);

}

.keyframe5 {

position: relative;

animation-name: animation-7;

animation-duration: 90s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1);

}

How to track truck/Ball on track/Road animation with scroll trigger(GSAP Animation)?

Track truck/Ball on track/Road animation with scroll trigger(GSAP Animation)

<!DOCTYPE html>

<head>

<title>Truck on Curvy Road</title>

<style>

body {

margin: 0;

font-family: Arial, sans-serif;

}

.container {

position: relative;

width: 100%;

height: 4320px; /* Height based on your path's size */

overflow: hidden;

}

.road {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 4320px; /* Match the height of the container */

}

.truck {

position: absolute;

width: 60px;

height: 60px;

transform: translate(-50%, -50%);

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.blocks {

height: 100vh;

width: 100%;

background: pink;

display: block;

border: 1px solid black;

}

.circle {

display: block;

width: 100px;

height: 100px;

background: #FFE9F2;

border-radius: 50%;

background: -webkit-radial-gradient(15px 10px, circle, #FFE9F2, #ffc0cb);

background: -moz-radial-gradient(25px 25px, circle, red, #000);

background: radial-gradient(25px 25px, circle, red, #000);

-webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

-moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

-ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;

-webkit-transition: all 1s ease;

transition: all 1s ease;

position: absolute;

left: 0;

}

/* Spinning the sphere using key frames */

@-ms-keyframes spin {

from { -ms-transform: rotate(0deg); }

to { -ms-transform: rotate(360deg); }

}

@-moz-keyframes spin {

from { -moz-transform: rotate(0deg); }

to { -moz-transform: rotate(360deg); }

}

@keyframes spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

@-webkit-keyframes spin {

from { -webkit-transform: rotate(0deg); }

to { -webkit-transform: rotate(360deg); }

}

</style>

</head>

<body>

<defs>

<style>

.st0, .st1 {

fill: none;

stroke: #FFE9F2;

stroke-miterlimit: 10;

}

.st1 {

stroke-width: 5px;

}

</style>

</defs>

</svg>

</div>

</div>

// Register GSAP plugins

gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);

// Create a GSAP timeline for the truck animation

const truckTimeline = gsap.timeline({

scrollTrigger: {

trigger: ".container", // Element that triggers the animation

start: "top 90%", // Start when the container is centered in the viewport

end: "bottom top", // End when the container reaches the top of the viewport

scrub: true, // Make the animation scrubbed (follow scroll position)

markers: true, // Show markers for debugging (remove in production)

}

});

truckTimeline.to(".truck", {

motionPath: {

path: "#road-path",

align: "#road-path",

alignOrigin: [0.5, 0.5], // Center the truck on the path

start: 1, // Start at the end of the path

end: 0, // End at the start of the path

autoRotate: true, // Rotate the truck to follow the path

pin:true,

ease: "linear", // No easing to keep the truck moving smoothly

});

</script>

</body>

</html>