Runok - Web Agency HTML5 Template

Враження

Палітра

Типографіка

Бібліотеки

Сторінки

• Home v1 — Web Designindex.html
• Home v2 — Creative Studioindex-2.html
• Home v3 — Web Developmentindex-3.html
• Home v4 — Modern Agencyindex-4.html
• Home v5 — IT Solutionindex-5.html
• Home v6 — Digital Agencyindex-6.html
• Home v7 — Corporate Agencyindex-7.html
• Home v8 — Web Agencyindex-8.html
• Home v9 — Creative Agencyindex-9.html
• Home v10 — Digital Studioindex-10.html
• Home v11 — Startup Agencyindex-11.html
• Home v12 — IT Studioindex-12.html
• Home v13 — Consulting Agencyindex-13.html
• Home v14 — IT Serviceindex-14.html
• Home v15 — Creative Studioindex-15.html
• Home v16 — Digital Marketingindex-16.html
• Home v17 — Design Studioindex-17.html
• Home v18 — Personal Portfolioindex-18.html
• Home v19 — Video Agencyindex-19.html
• Aboutabout.html
• Servicesservice.html
• Service Detailsservice-details.html
• Projectsproject.html
• Project Detailsproject-details.html
• Teamteam.html
• Team Detailsteam-details.html
• Pricingpricing.html
• FAQfaq.html
• Blog Gridblog-grid.html
• Blog Listblog-grid-2.html
• Blog Detailsblog-details.html
• Shopshop.html
• Shop Detailsshop-details.html
• Cartcart.html
• Wishlistwishlist.html
• Checkoutcheckout.html
• Contactcontact.html
• 404error.html

Ключові фішки

• Per-character split-text reveal on stacked hero headlines

  Де знайти

  index.html section.hero-section .hero-content .anim-text, assets/js/main.js (window.load → SplitType + gsap.fromTo on .anim-text chars)

  Чому цікаво

  Three sibling headlines (h4 sub-title, h2 title, h3 bottom-title) all carry the .anim-text class. On window load, each is split into chars via SplitType, then GSAP staggers the chars from y:100% to y:0% with a 0.03 s gap. Result is a three-line cascade that feels like a kinetic poster opening rather than a generic fade — and works on plain heading markup, no per-letter spans authored by hand.

  Коли використовувати

  Tall image-led heroes that need a confident, cinematic intro on big-typography titles; agency/portfolio sites where the headline is the centerpiece.

  Техніка

  SplitType 0.3, GSAP fromTo, jQuery .each

• Mask-reveal image effect with counter-translating zoom

  Де знайти

  index.html section.about-section .reveal, index.html section.faq-section .faq-img.reveal, assets/js/main.js (revealContainers forEach with gsap timeline)

  Чому цікаво

  Each .reveal block runs a two-step GSAP timeline tied to ScrollTrigger: the container slides in with xPercent:-100 while its inner <img> simultaneously translates xPercent:100 with scale 1.3 (delay -1.5 to overlap). The visual is a curtain wiping right while the image inside settles back to scale 1 from the opposite side — a much richer feel than a static fade-in.

  Коли використовувати

  Editorial about/services blocks where photos should feel 'unveiled' rather than dropped in; works equally well for portfolio thumbnails.

  Техніка

  GSAP timeline, ScrollTrigger toggleActions, opposing xPercent transforms

• Bootstrap 5 accordion repurposed as a numbered project showcase

  Де знайти

  index.html section.project-section .project-accordion, assets/scss/layout/_project.scss .project-item / .accordion-button

  Чому цікаво

  Instead of a traditional grid, projects are stacked rows in a Bootstrap accordion. Closed rows show only number-circle + category + title; the active row paints the number circle in cobalt and opens a body that lays out a left description column and a right project thumbnail. Adds copy + visual context to a list view without doubling row height for inactive items.

  Коли використовувати

  Agencies or studios with deep case studies — too many to grid 2x2, but too important to hide behind a simple link list.

  Техніка

  Bootstrap 5 collapse, CSS grid (65px+1fr), state-driven background-color on .number

• Bidirectional infinite carouselTicker word marquees

  Де знайти

  index.html .running-text.testi (above testimonials), index.html .running-text.running-1 (between project and blog), assets/js/vendor/jquery.carouselTicker.js

  Чому цікаво

  Two parallel ticker bars use the same plugin but opposite directions (data-classes carouselTicker-nav vs carouselTicker-start), creating a counter-rotating word band you scroll between. The list items are styled italic in Plus Jakarta, separated by trailing dots, so the marquees double as section dividers.

  Коли використовувати

  Section breaks where a page wants visual rhythm without an image, especially on long single-page agency demos.

  Техніка

  jQuery carouselTicker plugin, two opposing data-direction targets

• ScrollSmoother + per-element fade-top stagger orchestrated together

  Де знайти

  assets/js/main.js (ScrollSmoother.create + .fade-wrapper .fade-top loop), index.html .fade-wrapper .fade-top instances on every section

  Чому цікаво

  GSAP ScrollSmoother is initialised at smooth:2 with effects disabled below 1025 px, then every .fade-wrapper looks up its .fade-top children and creates an individual ScrollTrigger per child with delay = index * 0.10. Pairing global smoothing with section-local sequential reveals lets each band of cards 'land' as it enters view without writing per-section code.

  Коли використовувати

  Long agency landing pages that want a buttery scroll feel plus a consistent reveal motif across many sections.

  Техніка

  GSAP ScrollSmoother (premium), ScrollTrigger, indexed timeline delays

• Conic-gradient scroll percentage orb that doubles as back-to-top

  Де знайти

  index.html #scroll-percentage, assets/js/main.js scrollTopPercentage()

  Чому цікаво

  On scroll, the script writes a conic-gradient(var(--rr-color-theme-primary) ${value}%, white ${value}%) directly onto the orb's background each frame, creating a ring fill effect with no SVG. When scrollValue passes 96 it swaps the percentage text for an up-arrow icon and uses the same element as a smooth scroll-to-top trigger.

  Коли використовувати

  Long single-page sites where readers need feedback on how far they've scrolled and a quick way back to the top, without adding a third UI element.

  Техніка

  CSS conic-gradient, JS scroll handler, smoothscroll behavior:'smooth'

• Persisted prefers-color-scheme theme switcher with no FOUC

  Де знайти

  index.html #theme-toogle, assets/js/main.js (storageKey/theme/reflectPreference), assets/scss/layout/_light-mode.scss [data-theme="light"] selectors

  Чому цікаво

  The script reads localStorage first, then falls back to window.matchMedia('(prefers-color-scheme: dark)') for the initial paint, sets data-theme on <html> before window load (so CSS doesn't flash), and the entire light theme is shipped as a [data-theme="light"] override sheet rather than swapping classes. Pair of dark-img/light-img <img> tags lets each visual asset have a paired counterpart without JS swapping src.

  Коли використовувати

  Any template that ships both palettes; ideal pattern for a 'no flicker' theme toggle without a framework.

  Техніка

  localStorage, matchMedia, [data-theme] attribute, paired dark-img/light-img markup

Компоненти