وبسایت مارکتینگ|ماهان مصباحی

🔴تصاویر زوم‌شونده با GSAP <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({   markers: false }); // Animate From To $(".stickey_circle_wrap").each(function (index) {   let triggerElement = $(this);   let targetElement = $(".circle");   let tl = gsap.timeline({     scrollTrigger: {       trigger: triggerElement,       // trigger element - viewport       start: "top top",       end: "bottom bottom",       scrub: 1     }   });   // Check screen width for breakpoint   if (window.matchMedia("(max-width: 768px)").matches) {     // Mobile/Tablet     tl.fromTo(targetElement, {         width: "10em", // Breakpoint width         height: "30em",         borderRadius: "20em"       },       {         width: "100%",         height: "90vh",         borderRadius: "0px",         duration: 1       }     );   } else {     // Desktop     tl.fromTo(targetElement, {         width: "40em", // Original width         height: "30em",         borderRadius: "20em"       },       {         width: "100%",         height: "90vh",         borderRadius: "0px",         duration: 1       }     );   } }); </script>

CSS: .container { padding: 0; margin: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; display: flex; justify-content: center; align-items: center; } .label { background-color: transparent; border: 2px solid rgb(91, 91, 240); display: flex; align-items: center; border-radius: 50px; width: 160px; cursor: pointer; transition: all 0.4s ease; padding: 5px; position: relative; } .label::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; width: 8px; height: 8px; transition: all 0.4s ease; border-radius: 100%; margin: auto; opacity: 0; visibility: hidden; } .label .input { display: none; } .label .title { font-size: 17px; color: #fff; transition: all 0.4s ease; position: absolute; right: 18px; bottom: 14px; text-align: center; } .label .title:last-child { opacity: 0; visibility: hidden; } .label .circle { height: 45px; width: 45px; border-radius: 50%; background-color: rgb(91, 91, 240); display: flex; justify-content: center; align-items: center; transition: all 0.4s ease; position: relative; box-shadow: 0 0 0 0 rgb(255, 255, 255); overflow: hidden; } .label .circle .icon { color: #fff; width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.4s ease; } .label .circle .square { aspect-ratio: 1; width: 15px; border-radius: 2px; background-color: #fff; opacity: 0; visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.4s ease; } .label .circle::before { content: ""; position: absolute; left: 0; top: 0; background-color: #3333a8; width: 100%; height: 0; transition: all 0.4s ease; } .label:has(.input:checked) { width: 57px; animation: installed 0.4s ease 3.5s forwards; } .label:has(.input:checked)::before { animation: rotate 3s ease-in-out 0.4s forwards; } .label .input:checked + .circle { animation: pulse 1s forwards, circleDelete 0.2s ease 3.5s forwards; rotate: 180deg; } .label .input:checked + .circle::before { animation: installing 3s ease-in-out forwards; } .label .input:checked + .circle .icon { opacity: 0; visibility: hidden; } .label .input:checked ~ .circle .square { opacity: 1; visibility: visible; } .label .input:checked ~ .title { opacity: 0; visibility: hidden; } .label .input:checked ~ .title:last-child { animation: showInstalledMessage 0.4s ease 3.5s forwards; } @keyframes pulse { 0% { scale: 0.95; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { scale: 1; box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } 100% { scale: 0.95; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes installing { from { height: 0; } to { height: 100%; } } @keyframes rotate { 0% { transform: rotate(-90deg) translate(27px) rotate(0); opacity: 1; visibility: visible; } 99% { transform: rotate(270deg) translate(27px) rotate(270deg); opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @keyframes installed { 100% { width: 150px; border-color: rgb(35, 174, 35); } } @keyframes circleDelete { 100% { opacity: 0; visibility: hidden; } } @keyframes showInstalledMessage { 100% { opacity: 1; visibility: visible; right: 56px; } }

HTML: <div class="container"> <label class="label"> <input type="checkbox" class="input" /> <span class="circle" ><svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 19V5m0 14-4-4m4 4 4-4" ></path> </svg> <div class="square"></div> </span> <p class="title">Download</p> <p class="title">Open</p> </label> </div>

کد های آموزش دکمه متحرک 👇

🔴🔴کدهای ساخت نوار پیشرفت: HTML: <div id="progressBar"></div> CSS: #progressBar { position: fixed; top: 0; left: 0; width: 0%; height: 5px; background-color: #00c853; z-index: 9999; transition: width 0.25s ease-out; }

🔥کدهای افزایش سرعت سایت: 🔻 حذف کدهای بلااستفاده گوتنبرگ: add_action('wp_enqueue_scripts', function() { wp_dequeue_style('global-styles'); wp_dequeue_style('wp-block-library'); }); 🔻 سبک کردن دیتابیس: define('WP_POST_REVISIONS', 5); 🔻 فعال کردن لیزی لود برای محتوای صفحه: .your-content { content-visibility: auto; }

🔴🔴سورس کد آموزش منوی آیکون دار: CSS: .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{ background-color: transparent !important } .elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted):after, .elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted):before { opacity: 1; } .elementor-nav-menu li .elementor-item::before{ content: ''; top: -25px; right: 0px; width: 100%; height: 50px; position: absolute; z-index: 100000000; background-size: 28px; background-position: center top; background-repeat: no-repeat; transition: all 0.3s ease-in-out } .elementor-nav-menu li .elementor-item:hover::before{ top: -30px; } /*home*/ .elementor-nav-menu li.home .elementor-item::before{ background-image: url(); }

🔴🔴🔴کد آموزش ریدایرکت: برای www ➡️ بدون www: RewriteEngine On RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] RewriteRule ^(.*)$ https://%1/$1 [L,R=301] یا برعکس: RewriteEngine On RewriteCond %{HTTP_HOST} ^example\.com [NC] RewriteRule ^(.*)$ https://www.example.com/$1 [L,R=301]

addEventListener("mousemove", (e) => { rotateElement(e, pre); }); function rotateElement(event, element) { // get mouse position const x = event.clientX; const y = event.clientY; // console.log(x, y) // find the middle const middleX = window.innerWidth / 2; const middleY = window.innerHeight / 2; // console.log(middleX, middleY) // get offset from middle as a percentage // and tone it down a little const offsetX = ((x - middleX) / middleX) * 45; const offsetY = ((y - middleY) / middleY) * 45; // console.log(offsetX, offsetY); // set rotation element.style.setProperty("--rotateX", offsetX + "deg"); element.style.setProperty("--rotateY", -1 * offsetY + "deg"); } </script>

🔴🔴🔴 آموزش ساخت دکمه متحرک: <pre contenteditable class="language-css" tabindex="0"><code class="language-css"><span class="token selector"> This is Your Path</span></span> <span class="token property"> To Digital </span></span><span class="token punctuation"></span> <span class="token punctuation">   Excellence</span></code><img decoding="async" src=""></pre> </div> <style> :root { --pink: hsl(338, 70%, 55%); --teal: hsl(183, 70%, 62%); --white: hsl(334, 7%, 95%); } body { background: hsl(224, 32%, 12%); background-image: conic-gradient( from 0deg at 50% 50%, blue, purple, purple, blue ); background-blend-mode: multiply; min-block-size: 100dvh; pre { --selector: var(--pink); --property: var(--teal); --punctuation: var(--white); --undefined: var(--white); font-size: 2rem; font-weight: bold; color: var(--undefined); background: hsl(222, 45%, 7%); padding: 2rem; border-radius: 1rem; position: relative; transform-style: preserve-3d; transform: perspective(5000px) rotateY(var(--rotateX)) rotateX(var(--rotateY)); } pre > * { text-shadow: 0 0 0.3em currentColor; } pre::before, pre::after { content: ""; position: absolute; border-radius: inherit; } /* shadow */ pre::before { inset: 0.75rem; border-radius: inherit; background: black; z-index: -1; transform: translateZ(-50px); filter: blur(15px); opacity: 0.5; } /* gradient thingy */ pre::after { z-index: -2; inset: -1rem; background: linear-gradient(-45deg, red, blue); transform: translateZ(-50px); } .selector { color: var(--selector); } .property { color: var(--property); } .punctuation { color: var(--punctuation); } .property + .punctuation { color: var(--property); } .pre-container { position: relative; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); } /* extras for CSS only */ .css-only pre { grid-row: 1 / -1; grid-column: 1 / -1; transition: transform 200ms ease-in-out; } .pre-container.css-only > div { z-index: 10; position: absolute; outline: 1px solid lime; } .pre-container.css-only > div:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; inset: 0; } .pre-container.css-only > div:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; inset: 0; } .pre-container.css-only > div:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; inset: 0; } .pre-container.css-only > div:nth-child(4) { grid-column: 1 / 2; grid-row: 2 / 3; inset: 0; } .pre-container.css-only > div:nth-child(5) { grid-column: 2 / 3; grid-row: 2 / 3; inset: 0; } .pre-container.css-only > div:nth-child(6) { grid-column: 3 / 4; grid-row: 2 / 3; inset: 0; } .pre-container.css-only > div:nth-child(7) { grid-column: 1 / 2; grid-row: 3 / 4; inset: 0; } .pre-container.css-only > div:nth-child(8) { grid-column: 2 / 3; grid-row: 3 / 4; inset: 0; } .pre-container.css-only > div:nth-child(9) { grid-column: 3 / 4; grid-row: 3 / 4; inset: 0; } .pre-container.css-only > div:nth-child(1):hover ~ pre { --rotateX: -25deg; --rotateY: 25deg; } .pre-container.css-only > div:nth-child(2):hover ~ pre { --rotateX: 0deg; --rotateY: 25deg; } .pre-container.css-only > div:nth-child(3):hover ~ pre { --rotateX: 25deg; --rotateY: 25deg; } .pre-container.css-only > div:nth-child(4):hover ~ pre { --rotateX: -25deg; --rotateY: 0deg; } .pre-container.css-only > div:nth-child(5):hover ~ pre { --rotateX: 0deg; --rotateY: 0deg; } .pre-container.css-only > div:nth-child(6):hover ~ pre { --rotateX: 25deg; --rotateY: 0deg; } .pre-container.css-only > div:nth-child(7):hover ~ pre { --rotateX: -25deg; --rotateY: -25deg; } .pre-container.css-only > div:nth-child(8):hover ~ pre { --rotateX: 0deg; --rotateY: -25deg; } .pre-container.css-only > div:nth-child(9):hover ~ pre { --rotateX: 25deg; --rotateY: -25deg; } .yt { position: fixed; bottom: 1.5rem; color: #bcbcbc; } </style> <script> const pre = document.querySelector("pre"); document.

شیرینی ۱۰ هزارتایی شدن پیج🎂 این قالب رو داخل المنتور درون ریزی کن و ازش برای بقیه طراحیات استفاده کن💜

add("open"); }); document.body.addEventListener("click", (event) => {}); </script>

قسمت دوم کدهای گالری متحرک موج دار: <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --transition: cubic-bezier(0.1, 0.7, 0, 1); } body { background: linear-gradient(90deg, black, #333); } .wrapper { display: flex; align-items: center; justify-content: center; height: 40vh; } .imgs-parent { display: flex; gap: 0.4rem; perspective: 60rem; } .img { width: 8.0rem; height: 19rem; background-size: cover; background-position: center; cursor: pointer; transition: transform 1.25s var(--transition), filter 3s var(--transition), width 0.3s var(--transition); position: relative; filter: grayscale(0) brightness(0.7); will-change: transform, filter; border-radius: 8px; } .content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; color: white; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } h3 { font-size: 14px !important; margin-bottom: 5px; } /* Button */ .btn { display: inline-block; font-family: "Montserrat", Sans-serif; padding: 4px 10px; background-color: transparent; background-image: linear-gradient(140deg, #0071E3 42%, #25409E 100%); color: white; text-decoration: none; font-size: 12px; font-weight: 600; fill: #000000; border-radius: 15px; text-align: center; transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; opacity: 0; visibility: hidden; margin-bottom: 8px; text-decoration: none !important; } .img:hover .btn, .img:hover .content { opacity: 1; visibility: visible; } .btn:hover { background-color: #005bb5; } .img:hover { transform: translateZ(17.375rem); filter: grayscale(0) brightness(0.9); } .img:hover .content { display: flex; flex-direction: column; justify-content: flex-end; } .img::before, .img::after { content: ""; position: absolute; width: 1.25rem; height: 100%; right: -1.25rem; } .img::after { left: -1.25rem; } .img:hover + * { transform: translateZ(14.77rem) rotateY(35deg); filter: grayscale(0.2) brightness(0.9); z-index: -1; } .img:hover + * + * { transform: translateZ(9.73rem) rotateY(40deg); filter: grayscale(0.4) brightness(0.8); z-index: -2; } .img:hover + * + * + * { transform: translateZ(4.17rem) rotateY(35deg); filter: grayscale(0.6) brightness(0.7); z-index: -3; } .img:hover + * + * + * + * { transform: translateZ(1.1rem) rotateY(25deg); filter: grayscale(0.8) brightness(0.6); z-index: -4; } .img:has(+ :hover) { transform: translateZ(14.77rem) rotateY(-35deg); filter: grayscale(0.2) brightness(0.9); } .img:has(+ * + :hover) { transform: translateZ(9.73rem) rotateY(-40deg); filter: grayscale(0.4) brightness(0.8); } .img:has(+ * + * + :hover) { transform: translateZ(4.17rem) rotateY(-35deg); filter: grayscale(0.6) brightness(0.7); } .img:has(+ * + * + * + :hover) { transform: translateZ(1.1rem) rotateY(-25deg); filter: grayscale(0.8) brightness(0.6); } .open { width: 25vw; transform: translateZ(17.375rem); filter: inherit; z-index: 1; margin: 0 0.45vw; } @media (max-width: 820px) { .img { width: 4.0rem; height: 19rem; } .img:hover { transform: translateZ(17.375rem); filter: inherit; } .open { width: 20vw; transform: translateZ(7.375rem); filter: inherit; z-index: 1; margin: 0 0.45vw; } /* Mindre tekst og knap på mindre skærme */ h3 { font-size: 8px; } .btn { font-size: 8px; padding: 2px 5px; border-radius: 10px; } } </style> <script> document.body.addEventListener("click", (event) => { const clickedElement = event.target, imgs = document.querySelectorAll(".img"); if (!clickedElement.classList.contains("img")) { imgs.forEach((img) => img.classList.remove("open")); return; } if (clickedElement.classList.contains("open")) { clickedElement.classList.remove("open"); return; } imgs.forEach((img) => img.classList.remove("open")); clickedElement.classList.

کدهای گالری متحرک موج دار: <html> <body data-rsssl=1 data-rsssl=1 data-rsssl=1> <div class="wrapper"> <div class="imgs-parent"> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>Fusion®</h3> <a href="https://nicopalmkvist.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>Panzer Collect</h3> <a href="https://nicopalmkvist.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>BikeUP™</h3> <a href="https://nicopalmkvist.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>Basic Apparel</h3> <a href="https://nicopalmkvist.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>Shaping Shoe</h3> <a href="https://nicopalmkvist.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>ARkk Project</h3> <a href="https://nicopalmkvist.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>Bahne TML</h3> <a href="https://nicopalmkvist.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>Bahne TML</h3> <a href="https://nicopalmkvist.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> <div class="img" style="background-image: url(https://elementor-template.lifeonablock.com/wp-content/uploads/2024/10/elementor-placeholder-image.webp)"> <div class="content"> <h3>DEA Clothing</h3> <a href="https://mahaanwp.gumroad.com/l/hrlzf" class="btn" target="_blank" rel="noopener">Read More</a> </div> </div> </div> </div> </body> </html>

<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>…

<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script> <script> $( document ).ready(function() { console.clear(); $('video').addClass('video-background'); const video = document.querySelector(".video-background"); let src = video.currentSrc || video.src; console.log(video, src); /* Make sure the video is 'activated' on iOS */ function once(el, event, fn, opts) { var onceFn = function (e) { el.removeEventListener(event, onceFn); fn.apply(this, arguments); }; el.addEventListener(event, onceFn, opts); return onceFn; } once(document.documentElement, "touchstart", function (e) { video.play(); video.pause(); }); gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ defaults: { duration: 1 }, scrollTrigger: { trigger: "#container", start: "top top", end: "bottom bottom", scrub: true } }); once(video, "loadedmetadata", () => { tl.fromTo( video, { currentTime: 0 }, { currentTime: video.duration || 1 } ); }); setTimeout(function () { if (window["fetch"]) { fetch(src) .then((response) => response.blob()) .then((response) => { var blobURL = URL.createObjectURL(response); var t = video.currentTime; once(document.documentElement, "touchstart", function (e) { video.play(); video.pause(); }); video.setAttribute("src", blobURL); video.currentTime = t + 0.01; }); } }, 1000); }); </script>

🔴🔴 کد افزایش حجم آپلود در وردپرس: php_value upload_max_filesize 100M php_value post_max_size 100M php_value max_execution_time 300 php_value max_input_time 300

🔴🔴پرامپت ساخت عکس پرتره با چت جی پی تی: { "transformation": "portrait_angle_change", "source_view": "direct_frontal", "target_view": "3/4_angle", "angle_degrees": 45, "style": "1920s_hollywood_glamour", "color_mode": "black_and_white", "contrast": "high", "lighting": { "type": "studio_spot", "effect": "chiaroscuro", "highlights": "strong_on_one_side", "shadows": "deep_on_opposite_side", "reference": "george_hurrell_portraits" }, "subject": { "gaze_direction": "slightly_away_from_camera", "preserve": ["distinctive_features", "facial_expression", "identity"] }, "technical_details": { "focus": "sharp_on_eyes", "skin_texture": "smooth_luminous", "finish": "silver_gelatin_print_appearance" }, "mood": "timeless_elegant_dramatic", "purpose": "showcase_facial_dimension" }

<span style="background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> Enter you text here </span>

<span style="background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> Enter you text here </span>