@@ -255,14 +255,13 @@ <h1 class="title">Where Data Meets Intuition</h1>
255255 < div class ="col-md-6 ">
256256 < div class ="v-hero-left ">
257257 < div class ="sub-text d-flex gap-1 align-items-center ">
258- Focus on the science; we handle the code < span class =" flash " > _ </ span >
258+ What’s the next step for the data obtained from your experiments?
259259 </ div >
260260 < h1 class ="v-hero-title ">
261261 The intuitive path to data-driven decisions
262262 </ h1 >
263263 < p > We are experts in < strong > custom bioinformatics data workflow development</ strong > , backed
264- < br > by years of experience. Our core tool Viash generates the boilerplate code,
265- < br > < strong > streamlining your workflow operations.</ strong > </ p >
264+ < br > by years of experience. </ p >
266265 <!-- <a href="./contact/contact.html" class="mt-2 btn btn-primary rounded-pill d-inline-flex align-items-center gap-2">Contact Us <i class="bi bi-arrow-right"></i></a> -->
267266 </ div >
268267 </ div >
@@ -320,17 +319,18 @@ <h2 class="p-color">Overcoming Industry Challenges</h2>
320319</ div >
321320</ section >
322321
323-
324- < div class ="container ">
325- < div class ="row justify-content-center text-center pt-5 mt-xl-5 mb-3 ">
326- < div class ="col-lg-8 ">
327- < h1 > We tackle key challenges in custom data analysis development</ h1 >
328- </ div >
329- < div class ="pt-5 mt-xl-1 mb-5 train-height " id ="di_slang1 "> </ div >
330- < a href ="./approach/approach.html#challenges " class ="mb-5 btn btn-primary rounded-pill d-inline-flex align-items-center gap-2 w-auto "> Find Out More< i class ="bi bi-arrow-right "> </ i > </ a >
331-
322+ < div class ="container ">
323+ < div class ="row justify-content-center text-center pt-5 mt-xl-5 mb-3 ">
324+ < div class ="col-lg-8 ">
325+ < h1 > From Raw to Processed Data</ h1 >
326+ < p > We provide comprehensive < b > end-to-end data workflow support</ b > from raw to processed data obtained from your experiment, ensuring seamless integration and efficiency. < br > < br > Ensure expert assistance in data workflow development with services such as < span class ="green-circle "> </ span > < b > Data Extraction and Transformation</ b > < span class ="green-circle "> </ span > < b > High-Throughput Demultiplexing</ b > < span class ="green-circle "> </ span > < b > Multi-omics Data Processing</ b > < span class ="green-circle "> </ span > < b > Data Quality Control</ b > .</ p >
332327 </ div >
328+ < div class ="pt-5 mt-xl-1 mb-5 train-height d-md-block d-none " id ="di_slang3 "> </ div >
329+ < div class ="pt-5 mt-xl-1 mb-5 train-height d-md-none " id ="di_slang4 "> </ div >
330+
331+ </ div >
333332</ div >
333+
334334<!--
335335<section id="viashhubregister" class="mb-5 v-download-whitepaper text-center bg-primary py-5">
336336 <div class="container py-xl-3">
@@ -503,6 +503,95 @@ <h1>Data Intuitive: Empowering Top 10 Pharma Industry </h1>
503503</ script >
504504
505505
506+ < script >
507+ document . addEventListener ( "DOMContentLoaded" , function ( ) {
508+ console . log ( "DOM fully loaded and parsed for di_anim" ) ;
509+
510+ function initLottieAnimation ( containerId , jsonPath , animationName , scrollSpeedMultiplier = 1 ) {
511+ const container = document . getElementById ( containerId ) ;
512+ if ( ! container ) {
513+ console . error ( "Container not found: " + containerId ) ;
514+ return ;
515+ }
516+
517+ const animation = lottie . loadAnimation ( {
518+ container : container , // the DOM element that will contain the animation
519+ renderer : 'svg' , // 'svg', 'canvas' or 'html'
520+ loop : false , // Disable infinite looping
521+ autoplay : false , // Disable autoplay, we'll control it via scrolling
522+ path : jsonPath , // the path to the animation json
523+ name : animationName , // optional, a name for the animation. Can be used to reference the animation later
524+ rendererSettings : {
525+ preserveAspectRatio : 'xMidYMid meet' , // options are similar to the ones in the SVG spec
526+ }
527+ } ) ;
528+
529+ let lastScrollY = window . pageYOffset ;
530+
531+ window . addEventListener ( 'scroll' , function ( ) {
532+ const currentScrollY = window . pageYOffset ;
533+ const scrollDelta = currentScrollY - lastScrollY ;
534+
535+ // Calculate the frame change based on scroll direction and multiplier
536+ const frameChange = scrollDelta * scrollSpeedMultiplier ;
537+ let currentFrame = animation . currentFrame + frameChange ;
538+
539+ // Loop the animation if the current frame exceeds the total frames
540+ if ( currentFrame >= animation . totalFrames ) {
541+ currentFrame = currentFrame % animation . totalFrames ; // Reset to the beginning
542+ } else if ( currentFrame < 0 ) {
543+ currentFrame = animation . totalFrames + ( currentFrame % animation . totalFrames ) ; // Handle negative scrolling
544+ }
545+
546+ animation . goToAndStop ( currentFrame , true ) ;
547+ lastScrollY = currentScrollY ;
548+ } ) ;
549+
550+ animation . addEventListener ( 'DOMLoaded' , function ( ) {
551+ console . log ( "Animation loaded and ready" ) ;
552+ } ) ;
553+ }
554+
555+ // Initialize the animation with a scroll speed multiplier (adjust the multiplier as needed)
556+ initLottieAnimation ( 'di_slang3' , '/images/anim_data.json' , 'myAnimation3' , 0.5 ) ;
557+ } ) ;
558+ </ script >
559+ < script >
560+ document . addEventListener ( "DOMContentLoaded" , function ( ) {
561+ console . log ( "DOM fully loaded and parsed for di_anim" ) ;
562+
563+ function initLottieAnimation ( containerId , jsonPath , animationName , speedFactor = 1 ) {
564+ const container = document . getElementById ( containerId ) ;
565+ if ( ! container ) {
566+ console . error ( "Container not found: " + containerId ) ;
567+ return ;
568+ }
569+
570+ const animation = lottie . loadAnimation ( {
571+ container : container , // the DOM element that will contain the animation
572+ renderer : 'svg' , // 'svg', 'canvas' or 'html'
573+ loop : true , // Enable infinite looping
574+ autoplay : true , // Enable autoplay for continuous scrolling
575+ path : jsonPath , // the path to the animation json
576+ name : animationName , // optional, a name for the animation
577+ rendererSettings : {
578+ preserveAspectRatio : 'xMidYMid meet' , // options are similar to the ones in the SVG spec
579+ }
580+ } ) ;
581+
582+ // Set the playback speed using Lottie's built-in setSpeed method
583+ animation . addEventListener ( 'DOMLoaded' , function ( ) {
584+ console . log ( "Animation loaded and ready" ) ;
585+ animation . setSpeed ( speedFactor ) ; // Control speed here
586+ } ) ;
587+ }
588+
589+ // Initialize the animation with a speed factor (adjust the speed factor as needed)
590+ initLottieAnimation ( 'di_slang4' , '/images/anim_data_scroll.json' , 'myAnimation3' , 2 ) ; // Speed factor 2 for faster scrolling
591+ } ) ;
592+ </ script >
593+
594+
506595
507596
508597
0 commit comments